/* Apollon Resort and Apollon Jobs map: the site's "quiet luxury" finish for the two 3D apps.
   Loaded AFTER each page's own <style>; it restyles the existing UI and adds an entrance, atmosphere and
   glass/gold details. No markup, ids or scripts change (the 3D scenes are untouched).
   To go back: remove the <link> to this file (and css/motion.css + js/motion.js) from resort.html / jobs.html,
   or use the Git tag checkpoint-pre-apps-theme. */

:root{
  --ap-gold-1:#F3DFA4; --ap-gold-2:#D8BC73; --ap-gold-3:#B08C43;
  --ap-glass:rgba(11,23,48,.58); --ap-glass-line:rgba(227,201,135,.3);
  --ap-ease:cubic-bezier(.2,.7,.2,1);
  --ap-serif:"EB Garamond","Noto Serif Display",Garamond,Georgia,serif;
}

/* ---------- atmosphere over the 3D scene (never intercepts input) ---------- */
html::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(5,10,24,.5) 100%),
    radial-gradient(60% 40% at 88% 0%,rgba(243,223,164,.16),transparent 70%),
    linear-gradient(180deg,rgba(5,10,24,.0) 70%,rgba(5,10,24,.4) 100%)}
html::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}

/* ---------- header strip ---------- */
.top{background:linear-gradient(180deg,rgba(6,12,28,.94) 0%,rgba(6,12,28,.62) 58%,transparent 100%)}
.mark{letter-spacing:.44em;color:var(--ap-gold-2);font-size:.72rem}
.top h1{font-weight:500;letter-spacing:-.02em}
.sub{color:rgba(246,241,230,.78)}

/* ---------- glass pills, chips and region buttons ---------- */
.pill,.chip,.reg,.viewbtn,.lg-btn,.search input{
  background:var(--ap-glass);border-color:var(--ap-glass-line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .35s var(--ap-ease),border-color .3s,background .3s,color .3s,box-shadow .35s var(--ap-ease)}
.pill:hover,.chip:hover,.reg:hover,.viewbtn:hover{border-color:var(--ap-gold-2);transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(0,0,0,.8)}
.search input:focus{outline:none;border-color:var(--ap-gold-2);box-shadow:0 0 0 4px rgba(227,201,135,.2)}
.chips .chip{padding:8px 14px}
.chips .chip[aria-pressed="true"],.reg[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--ap-gold-1),var(--ap-gold-2) 55%,var(--ap-gold-3));border-color:transparent;color:#0B1730;
  box-shadow:0 10px 24px -12px rgba(176,140,67,.9)}
.chips .chip[aria-pressed="true"] span,.reg[aria-pressed="true"] span{color:#0B1730}

/* ---------- gold call-to-action buttons ---------- */
.find,.cta.post,.cta.alert,.btn.gold,.teamfab,.filtbar button.l{
  background:linear-gradient(135deg,var(--ap-gold-1) 0%,var(--ap-gold-2) 48%,var(--ap-gold-3) 100%);color:#0B1730;
  box-shadow:0 14px 30px -14px rgba(176,140,67,.95);
  transition:transform .35s var(--ap-ease),box-shadow .35s var(--ap-ease),filter .3s}
.find:hover,.cta.post:hover,.cta.alert:hover,.btn.gold:hover,.teamfab:hover{transform:translateY(-2px);filter:brightness(1.06)}
.find:active,.cta:active,.joincta:active,.btn:active{transform:translateY(0) scale(.98)}
.joincta,.cta.hire{
  background:linear-gradient(135deg,rgba(21,40,74,.92),rgba(8,17,36,.92));border:1px solid var(--ap-glass-line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .35s var(--ap-ease),border-color .3s}
.joincta:hover,.cta.hire:hover{border-color:var(--ap-gold-2);transform:translateY(-3px)}
.joincta .jsp{background:linear-gradient(135deg,var(--ap-gold-1),var(--ap-gold-3))}

/* ---------- map labels ---------- */
.blabel,.town{background:rgba(8,17,36,.82);border:1px solid var(--ap-glass-line);border-radius:10px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:.02em}
.town b{background:linear-gradient(135deg,var(--ap-gold-1),var(--ap-gold-3))}
.pin{background:linear-gradient(135deg,var(--ap-gold-1),var(--ap-gold-3));box-shadow:0 8px 18px -8px rgba(0,0,0,.9)}

/* ---------- panels, sheets and the guide ---------- */
.card,.drawer,.tp{
  background:linear-gradient(90deg,var(--ap-gold-3),var(--ap-gold-1),var(--ap-gold-3)) top/100% 3px no-repeat,var(--paper,#FBF7F0);
  border-top:0;border-radius:22px 22px 0 0;box-shadow:0 -30px 70px -20px rgba(0,0,0,.65)}
.card{border-radius:22px;padding-top:22px;transition:transform .55s var(--ap-ease)}
.drawer,.tp{transition:transform .55s var(--ap-ease)}
.card h2,.dh h2,.th h2,.det2 h3,.detail h3{letter-spacing:-.015em}
.card button,.df button,.tpf a,.det2 .acts a,.card a.req,.jsend,.applyb .btn{border-radius:999px;font-weight:700;letter-spacing:.02em;
  transition:transform .3s var(--ap-ease),box-shadow .3s,filter .3s}
.card button:hover,.df button:hover,.tpf a:hover,.det2 .acts a:hover,.card a.req:hover,.jsend:hover{transform:translateY(-1px);filter:brightness(1.08)}
.ob{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:rgba(6,12,28,.66)}
.obc{border-radius:24px;border-top:0;
  background:linear-gradient(90deg,var(--ap-gold-3),var(--ap-gold-1),var(--ap-gold-3)) top/100% 4px no-repeat,var(--paper,#FBF7F0)}
.ob:not([hidden]) .obc{animation:apPop .7s var(--ap-ease) both}
.obc h2{font-weight:500;letter-spacing:-.02em}
.obc button{border-radius:999px}

/* ---------- inside views: department / town sheets and forms ---------- */
.hero:before{content:"";position:absolute;right:-110px;top:-170px;width:440px;height:440px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);pointer-events:none}
.hero .bk,.bk{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pc,.job,.perks li{transition:transform .45s var(--ap-ease),border-color .3s,box-shadow .45s var(--ap-ease)}
.pc:hover,.job:hover{transform:translateY(-4px);border-color:var(--ap-gold-2);box-shadow:0 22px 34px -26px rgba(11,23,48,.55)}
.opt,.tabs button{transition:background .25s,color .25s,border-color .25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ap-gold-2)!important;box-shadow:0 0 0 4px rgba(227,201,135,.22)}

/* ---------- scrollbars ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(176,140,67,.6) transparent}

/* ---------- entrance ---------- */
@keyframes apIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes apRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes apPop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes apFade{from{opacity:0}to{opacity:1}}
canvas{animation:apFade 1.6s ease both;filter:saturate(1.1) contrast(1.04)}
.top .mark,.top h1,.top .sub,.top .ctrl,.top .regions,.top .topbtns,.top .prep{animation:apIn .9s var(--ap-ease) backwards}
.top .mark{animation-delay:.15s}.top h1{animation-delay:.25s}.top .sub{animation-delay:.35s}
.top .ctrl,.top .topbtns{animation-delay:.45s}.top .regions{animation-delay:.5s}
.chips .chip{animation:apRise .8s var(--ap-ease) backwards}
.chips .chip:nth-child(1){animation-delay:.7s}.chips .chip:nth-child(2){animation-delay:.78s}.chips .chip:nth-child(3){animation-delay:.86s}
.chips .chip:nth-child(4){animation-delay:.94s}.chips .chip:nth-child(5){animation-delay:1.02s}.chips .chip:nth-child(6){animation-delay:1.1s}
.joincta,.bar .cta{animation:apRise .9s var(--ap-ease) 1.15s backwards}
.clock{animation:apIn .9s var(--ap-ease) .3s backwards}
.lgs,.lang{animation:apIn .9s var(--ap-ease) .4s backwards}

@media (prefers-reduced-motion:reduce){
  canvas,.top .mark,.top h1,.top .sub,.top .ctrl,.top .regions,.top .topbtns,.top .prep,.chips .chip,.joincta,.bar .cta,.clock,.lgs,.lang,
  .ob:not([hidden]) .obc{animation:none}
  .pill,.chip,.reg,.pc,.job,.card,.drawer,.tp{transition:none}
}

/* privacy acknowledgement + optional news opt-in (Resort application and request dialog, 23 Oct 2026) */
.mkt{border:0;margin:10px 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.mkt legend{padding:0;margin-bottom:6px;font-size:13px;font-weight:600;line-height:1.45;width:100%}
.mkt label{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;margin:0}
.mkt input,label.ack input{width:18px;height:18px;margin:0;flex:none;accent-color:#C3A45B}
label.ack{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.45;margin:8px 0 6px;cursor:pointer}
label.ack input{margin-top:1px}
label.ack a{color:inherit;text-decoration:underline}
label.ack b{color:#E58A82}