/* =====================================================================
   Anita Key v8: motion, photo banners, sections, desktop layout,
   photo protection. Loaded after app.css. Text never under 19px.
   ===================================================================== */

/* ---------- photo protection (deterrence: no saving, no dragging) ---------- */
img,.ph{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
img{pointer-events:none}
.ph{background-size:cover;background-position:center 22%;background-repeat:no-repeat}
@media print{body *{display:none!important}body:after{content:"Anita Key";display:block;font-size:24px;padding:40px}}
.shielded .protect{filter:blur(28px) brightness(.6);transition:filter .15s}
.wm{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;display:grid;place-items:center}
.wm span{transform:rotate(-24deg);font-weight:700;font-size:calc(19px*var(--ts));letter-spacing:.12em;color:rgba(255,255,255,.34);text-shadow:0 1px 2px rgba(0,0,0,.35);white-space:nowrap;line-height:2.6;text-align:center}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--house),transform 1s var(--house);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.rv.zoom{transform:scale(.94)}
.rv.zoom.in{transform:none}
.rv.left{transform:translateX(-36px)}
.rv.right{transform:translateX(36px)}
.rv.left.in,.rv.right.in{transform:none}
.enter{animation:enter2 .7s var(--house)}
@keyframes enter2{from{opacity:0;filter:blur(8px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}
.btn.pri{position:relative;overflow:hidden}
.btn.pri:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);animation:sheen 5.5s var(--house) infinite}
@keyframes sheen{0%,70%{left:-60%}100%{left:130%}}
.kicker{display:inline-flex;align-items:center;gap:12px}
.kicker:before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.btn.pri:after{display:none}}

/* ---------- photo banner at the top of each room ---------- */
.banner{position:relative;min-height:46svh;display:flex;align-items:flex-end;overflow:hidden;margin-bottom:6px}
.banner .ph{position:absolute;inset:-8% 0 0 0;height:116%;will-change:transform;transform:translateY(var(--py,0px)) scale(1.06);transition:transform .1s linear}
.banner .shade{position:absolute;inset:0}
html[data-theme=maison] .banner .shade{background:linear-gradient(180deg,rgba(18,10,13,.15) 0%,rgba(18,10,13,.35) 45%,rgba(18,10,13,.92) 88%,var(--bg) 100%)}
html[data-theme=doll] .banner .shade{background:linear-gradient(180deg,rgba(255,227,240,0) 0%,rgba(255,227,240,.35) 45%,rgba(255,227,240,.94) 88%,var(--bg) 100%)}
.banner .inner{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 16px 22px}
.banner h2{font-size:calc(clamp(40px,8vw,84px)*var(--ts));line-height:1.02;margin:6px 0 8px;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.banner .lead{max-width:760px;color:var(--ink2);margin:0}
.banner .kicker{margin-bottom:0}
.banner+.wrap.room{padding-top:14px}

/* ---------- photo interludes between sections ---------- */
.interlude{position:relative;height:clamp(240px,52vw,520px);margin:34px 0;overflow:hidden;border-radius:0}
.interlude .ph{position:absolute;inset:-10% 0;will-change:transform;transform:translateY(var(--py,0px))}
.interlude .shade{position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,transparent 22%,transparent 70%,var(--bg) 100%)}
.interlude q{position:absolute;left:0;right:0;bottom:18%;z-index:2;text-align:center;font-family:var(--h);font-style:italic;font-size:calc(clamp(26px,4vw,46px)*var(--ts));color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.6);padding:0 24px;quotes:none}
html[data-theme=doll] .interlude q{font-style:normal;font-weight:700}

/* ---------- bands: sections that look different from each other ---------- */
.band{position:relative;padding:34px 0;margin:10px 0}
.band.alt{background:var(--bg2)}
html[data-theme=maison] .band.alt{background:linear-gradient(180deg,transparent,rgba(217,180,124,.06) 12%,rgba(176,58,91,.07) 88%,transparent)}
html[data-theme=doll] .band.alt{background:linear-gradient(180deg,transparent,rgba(255,46,147,.07) 12%,rgba(123,63,228,.06) 88%,transparent)}
.band .sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.band .sechead h3{font-size:calc(clamp(30px,5vw,48px)*var(--ts))}
.ornament{display:flex;align-items:center;gap:14px;justify-content:center;color:var(--acc);margin:6px 0 18px}
.ornament:before,.ornament:after{content:"";height:1px;width:min(22vw,160px);background:linear-gradient(90deg,transparent,var(--acc))}
.ornament:after{transform:scaleX(-1)}

/* ---------- hub: tiles with photos ---------- */
.tile.photo{color:#fff;justify-content:flex-end;min-height:190px;border:0}
.tile.photo .ph{position:absolute;inset:0;transition:transform 1.4s var(--house)}
.tile.photo:hover .ph{transform:scale(1.07)}
.tile.photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,4,12,.05) 20%,rgba(20,4,12,.86))}
.tile.photo>*:not(.ph){position:relative;z-index:2}
.tile.photo .ic,.tile.photo span{color:#fff}
.tile.photo span{opacity:.92}
.tile.photo .badge{position:absolute;top:12px;right:12px}

/* ---------- booking: choices that stand apart ---------- */
.sets2{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.setc{position:relative;display:grid;grid-template-rows:auto 1fr;text-align:left;padding:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--panel);cursor:pointer;transition:transform .6s var(--house),box-shadow .4s,border-color .3s;box-shadow:var(--sh)}
.setc:hover{transform:translateY(-6px)}
.setc[aria-pressed=true]{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc),var(--sh)}
.setc .ph{position:relative;aspect-ratio:16/10;transition:transform 1.4s var(--house)}
.setc:hover .ph{transform:scale(1.05)}
.setc .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px}
.setc b{font-family:var(--h);font-weight:var(--hw);font-size:calc(28px*var(--ts));line-height:1.1}
.setc .p{font-family:var(--h);font-weight:var(--hw);font-size:calc(36px*var(--ts));color:var(--acc);line-height:1}
.setc .d{font-size:calc(19px*var(--ts));color:var(--ink2)}
.setc .tag{position:absolute;top:14px;left:14px;z-index:2;padding:6px 14px;border-radius:999px;font-weight:700;font-size:calc(19px*var(--ts));background:var(--panel);color:var(--ink);box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.setc.feat{border-color:var(--acc)}
.setc.feat .tag{background:var(--acc);color:var(--accInk)}
.setc.feat .ph{aspect-ratio:16/9}
.setc .chosen{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:50%;display:none;place-items:center;background:var(--acc);color:var(--accInk)}
.setc[aria-pressed=true] .chosen{display:grid}
.kindrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}

/* ---------- gallery protection ---------- */
.gal .g .ph{position:absolute;inset:0}
.gal .g.locked .ph{filter:blur(16px) saturate(.7);transform:scale(1.15)}
.viewer{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4;max-height:76svh;margin:0 auto}
.viewer .ph{position:absolute;inset:0;background-size:contain;background-color:#000;background-position:center}

/* ---------- Anita: magazine layout ---------- */
.mag-quote{font-family:var(--h);font-style:italic;font-size:calc(clamp(28px,4vw,44px)*var(--ts));line-height:1.2;text-align:center;max-width:820px;margin:10px auto 26px;color:var(--ink)}
html[data-theme=doll] .mag-quote{font-style:normal;font-weight:700}
.photostrip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,32%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;scrollbar-width:none}
.photostrip::-webkit-scrollbar{display:none}
.photostrip .ph{aspect-ratio:3/4;border-radius:var(--r);scroll-snap-align:start}

/* =====================================================================
   Desktop: more room, more drama
   ===================================================================== */
@media (min-width:980px){
  .wrap{max-width:1200px;padding:0 32px}
  .top .in{max-width:1200px;padding:12px 32px}
  /* front door: photo on the left, words on the right */
  .title{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}
  .title .bgimg{position:relative;inset:auto;min-height:100svh;transform:none;animation:drift 22s ease-in-out infinite alternate}
  .title .veil{left:0;right:auto;width:58%}
  html[data-theme=maison] .title .veil{background:linear-gradient(90deg,transparent 60%,#120a0d 100%)}
  html[data-theme=doll] .title .veil{background:linear-gradient(90deg,transparent 60%,#ffe3f0 100%)}
  .title .tc{align-self:center;max-width:640px;margin:0;padding:48px 56px}
  .title h1 .l{font-size:calc(118px*var(--ts))}
  /* hub: profile column + tiles */
  .hubgrid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:28px;align-items:start;margin-top:18px}
  .hubgrid .side{position:sticky;top:88px}
  .hubgrid .hud{margin-top:0}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .tile{min-height:180px}
  .tile.photo{min-height:240px}
  .tile.hero{grid-column:span 2;grid-row:span 2;min-height:496px}
  /* rooms */
  .banner{min-height:62svh}
  .banner .inner{padding:0 32px 40px}
  .sets2{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .setc.feat{grid-column:span 2;grid-row:span 2}
  .setc.feat .ph{aspect-ratio:auto;min-height:420px}
  .setc.feat b{font-size:calc(40px*var(--ts))}
  .grid2{gap:24px}
  .gal{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .lookpick{grid-template-columns:repeat(6,minmax(0,1fr))}
  .photostrip{grid-auto-columns:minmax(260px,24%)}
  .room>h2{font-size:calc(56px*var(--ts))}
}
@media (min-width:1400px){
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:640px) and (max-width:979px){
  .sets2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .setc.feat{grid-column:span 2}
}

/* v8.1: hub order and wide tiles */
.tile.wide{grid-column:span 2}
.hubgrid{display:flex;flex-direction:column}
.hubgrid .side{display:contents}
.hubgrid .side .quests{order:3}
.hubgrid .main{order:2}
@media (min-width:980px){
  .hubgrid{display:grid}
  .hubgrid .side{display:block}
  .hubgrid .side .quests{margin-top:16px}
  .sets2{grid-auto-flow:dense}
}
.tiles{grid-auto-flow:dense}
.hubgrid .side .setbar{order:3}.hubgrid .side .quests{order:4}

/* =====================================================================
   v8.2: breathing space, calm main room, living background
   ===================================================================== */
/* living background: light that drifts and changes colour as you scroll */
html{background:var(--bg)}
html body{background:transparent!important;line-height:1.62}
#bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--bg)}
#bgfx:before,#bgfx:after{content:"";position:absolute;width:120vmax;height:120vmax;border-radius:50%;filter:blur(40px);opacity:.75;will-change:transform;transition:background 1.2s}
html[data-theme=maison] #bgfx:before{background:radial-gradient(closest-side,hsla(calc(340 + var(--sp,0)*40),58%,24%,.85),transparent);left:calc(30% - var(--sp,0)*70%);top:calc(-60vmax + var(--sp,0)*90vh);animation:orb1 26s ease-in-out infinite alternate}
html[data-theme=maison] #bgfx:after{background:radial-gradient(closest-side,hsla(calc(32 - var(--sp,0)*50),55%,22%,.6),transparent);right:calc(-70vmax + var(--sp,0)*60%);bottom:calc(-70vmax + var(--sp,0)*40vh);animation:orb2 32s ease-in-out infinite alternate}
html[data-theme=doll] #bgfx:before{background:radial-gradient(closest-side,hsla(calc(330 + var(--sp,0)*30),100%,85%,.9),transparent);left:calc(30% - var(--sp,0)*70%);top:calc(-60vmax + var(--sp,0)*90vh);animation:orb1 26s ease-in-out infinite alternate}
html[data-theme=doll] #bgfx:after{background:radial-gradient(closest-side,hsla(calc(270 - var(--sp,0)*40),90%,88%,.85),transparent);right:calc(-70vmax + var(--sp,0)*60%);bottom:calc(-70vmax + var(--sp,0)*40vh);animation:orb2 32s ease-in-out infinite alternate}
@keyframes orb1{to{transform:translate(8vw,6vh) scale(1.08)}}
@keyframes orb2{to{transform:translate(-10vw,-4vh) scale(.94)}}
@media (prefers-reduced-motion:reduce){#bgfx:before,#bgfx:after{animation:none}}

/* more air everywhere */
.wrap{padding:0 20px}
.stack>*+*{margin-top:22px}
.card{padding:22px}
.grid2{gap:22px}
.room{padding-bottom:100px}
.tiles{gap:14px}
.band{padding:48px 0 52px;margin:0}
.band .sechead{margin-bottom:22px}
.band .sechead h3{font-size:calc(clamp(34px,8vw,52px)*var(--ts));line-height:1.05;margin-top:2px}
.band .sechead .kicker{margin-bottom:4px}
.band+.band{border-top:1px solid color-mix(in srgb,var(--line) 45%,transparent)}

/* top bar: quiet, see-through over the opening photo */
#topbar .top{transition:background .5s,border-color .5s,backdrop-filter .5s}
#topbar.over:not(.solid) .top{background:transparent!important;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#topbar.over{position:fixed;left:0;right:0;top:0;z-index:60}
#topbar.over .top{position:relative}
.top .in{padding:12px 20px}
.tb{min-height:48px;padding:8px 16px;background:color-mix(in srgb,var(--panel) 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tb.ghost,.tb.icon{width:48px;padding:0;justify-content:center}
.tb.icon .lbl{display:none}
.tb.keys{gap:10px;padding:6px 18px 6px 8px}
.tb.keys .kc{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--accInk)}
.tb.keys .kc .ic{width:20px;height:20px}
.tb.keys b{font-family:var(--h);font-weight:var(--hw);font-size:calc(24px*var(--ts));color:var(--ink)}
.tb.keys .kl{font-size:calc(19px*var(--ts));color:var(--ink2);font-weight:500}
@media (min-width:700px){.tb.icon{width:auto;padding:8px 18px}.tb.icon .lbl{display:inline}}

/* opening photo of the main room */
.hubhero{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden}
.hubhero .ph{position:absolute;inset:-6% 0 0;height:112%;transform:translateY(var(--py,0px)) scale(1.05);will-change:transform}
.hubhero .shade{position:absolute;inset:0}
html[data-theme=maison] .hubhero .shade{background:linear-gradient(180deg,rgba(18,10,13,.45) 0%,rgba(18,10,13,0) 22%,rgba(18,10,13,.25) 50%,rgba(18,10,13,.9) 84%,var(--bg) 100%)}
html[data-theme=doll] .hubhero .shade{background:linear-gradient(180deg,rgba(255,227,240,.35) 0%,rgba(255,227,240,0) 22%,rgba(255,227,240,.25) 50%,rgba(255,227,240,.92) 84%,var(--bg) 100%)}
.hubhero .inner{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 24px 64px}
.hubl{font-size:calc(clamp(62px,17vw,120px)*var(--ts));color:var(--ink);line-height:1.1;margin-bottom:8px;text-shadow:0 2px 30px rgba(0,0,0,.35);animation:glow 2.2s var(--house) both}
html[data-theme=doll] .hubl{color:var(--acc)}
.greet{font-family:var(--h);font-style:italic;font-size:calc(28px*var(--ts));color:var(--ink);margin:0 0 14px}
html[data-theme=doll] .greet{font-style:normal}
.greet b{font-style:normal;font-weight:var(--hw)}
.lvlline{display:flex;align-items:center;gap:12px;font-size:calc(19px*var(--ts));color:var(--ink2);margin-bottom:12px}
.avatar.mini{width:44px;height:44px;flex:0 0 44px}
.avatar.mini .ic{width:24px;height:24px}
.hubhero .bar{max-width:420px}
.lvlsub{font-size:calc(19px*var(--ts));color:var(--ink2);margin:8px 0 0}
.scrollcue{position:absolute;left:50%;bottom:18px;z-index:2;width:2px;height:34px;margin-left:-1px;background:linear-gradient(var(--acc),transparent);animation:cue 2.2s var(--house) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hint.solo{margin:28px 0 8px;padding:24px 22px;gap:18px}

/* tiles: bigger and calmer, photo first */
.tile{padding:20px 18px;border-radius:22px}
.tile.photo{min-height:220px}
.tile.hero{grid-column:span 2;min-height:420px}
.tile.hero .ph{position:absolute;inset:0;transition:transform 1.4s var(--house)}
.tile.hero:hover .ph{transform:scale(1.05)}
.tile.hero>*:not(.ph){position:relative;z-index:2}
.tile.wide{grid-column:span 2;min-height:200px}
.tile b{font-size:calc(30px*var(--ts))}
.panel.quests{padding:22px}
.setbar{margin-top:22px}

@media (min-width:980px){
  .hubhero{min-height:92svh}
  .hubhero .inner{padding:0 32px 90px}
  .band{padding:72px 0 76px}
  .band .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .tile.photo{min-height:300px}
  .tile.hero{grid-row:span 2;min-height:620px}
  .band .panel.quests{max-width:760px}
}
@media (min-width:980px){.tile.tallD{grid-row:span 2}}

/* v9: keep faces in frame on landscape crops of portrait photos */
.setc .ph{background-position:center 14%}