/* ══════════════════════════════════════════════════════════════
   FRAME IN GOA — HH GOA 2026
   Palette lifted from hhgoa.com: green #0B6839 · pink #FF0080
   yellow #FEE101 · cream #FFFBE8 · type Imbue + Victor Mono
   ══════════════════════════════════════════════════════════════ */

:root{
  --green:#0B6839;
  --green-deep:#053f22;
  --green-lift:#0E7D45;
  --pink:#FF0080;
  --yellow:#FEE101;
  --cream:#FFFBE8;
  --ink:#FFFFFF;

  --mono:"Victor Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"Imbue",Georgia,"Times New Roman",serif;

  --pad:clamp(16px,5vw,32px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

/* [hidden] must beat the display:flex/grid utility classes below */
[hidden]{display:none!important}

html,body{height:100%}

body{
  margin:0;
  background:var(--green);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
  display:flex;
  flex-direction:column;
  min-height:100svh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* very fine paper grain — keeps the flat green from looking like a CSS default */
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ─────────── chrome ─────────── */

.site-head{
  position:relative; z-index:2;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:18px var(--pad) 0;
}

.wordmark{
  display:inline-flex; align-items:baseline; gap:.28em;
  text-decoration:none; color:var(--ink);
  font-family:var(--display); font-weight:800; letter-spacing:.01em;
  font-size:clamp(26px,6vw,34px); line-height:1;
}
.wm-goa{color:var(--yellow)}
.wm-dot{width:.19em;height:.19em;border-radius:50%;background:var(--pink);align-self:flex-end;margin-bottom:.12em}

.head-meta{
  margin:0; font-size:10px; letter-spacing:.14em; font-weight:600;
  opacity:.78; text-align:right; white-space:nowrap;
}

.site-foot{
  position:relative; z-index:2; margin-top:auto;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:20px var(--pad) calc(20px + env(safe-area-inset-bottom));
  font-size:10px; letter-spacing:.14em; font-weight:600; opacity:.75;
}
.foot-tag{color:var(--yellow);opacity:.9}

main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column}

.screen{display:none;flex:1;flex-direction:column}
.screen.is-active{display:flex}

/* ═══════════ SCREEN 1 · UPLOAD ═══════════ */

.screen-upload{
  justify-content:center; align-items:center;
  padding:clamp(24px,7vh,64px) var(--pad) 0;
  position:relative;
}
.upload-inner{width:100%;max-width:640px;text-align:center}

.eyebrow{
  margin:0 0 20px; font-size:10px; font-weight:700; letter-spacing:.2em;
  color:var(--yellow);
}

.display{
  font-family:var(--display); font-weight:800;
  font-size:clamp(52px,15vw,104px); line-height:.86; letter-spacing:-.01em;
  margin:0 0 20px;
}
.display em{font-style:normal;color:var(--yellow)}

.lede{
  margin:0 auto 34px; max-width:42ch;
  font-size:clamp(13px,3.5vw,15px); line-height:1.65; opacity:.84;
}

.drop{position:relative;border-radius:var(--r)}

.btn{
  -webkit-tap-highlight-color:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 28px; border:0; border-radius:var(--r);
  font-family:var(--mono); font-size:14px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  transition:transform .16s var(--ease),background-color .16s var(--ease),
             box-shadow .16s var(--ease),opacity .16s var(--ease);
}
.btn:active{transform:scale(.975)}
.btn:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.ico{width:19px;height:19px;flex:none}

.btn-primary{background:var(--yellow);color:#07321b;box-shadow:0 6px 0 #b39c00}
.btn-primary:hover{background:#fff06a}
.btn-primary:active{box-shadow:0 3px 0 #b39c00}

.btn-upload{width:100%;max-width:380px;min-height:64px;font-size:15px}

.drop-hint{
  margin:16px 0 0; display:flex; flex-direction:column; gap:5px;
  font-size:10.5px; letter-spacing:.14em; font-weight:600; opacity:.76;
}
.dz-formats{color:var(--yellow);opacity:.85}
.dz-desktop{display:none}
@media (hover:hover) and (pointer:fine){.dz-desktop{display:block}}

.drop-overlay{
  position:absolute; inset:-14px; border:2px dashed var(--yellow); border-radius:var(--r);
  background:rgba(254,225,1,.07); display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity .15s var(--ease);
  font-size:13px;letter-spacing:.16em;font-weight:700;color:var(--yellow);
}
.drop.is-over .drop-overlay{opacity:1}

.trust{
  list-style:none; margin:32px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px;
}
.trust li{
  font-size:10px; letter-spacing:.1em; font-weight:600; opacity:.78;
  border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:6px 12px;
}

.signal{
  margin:auto 0 8px; padding-top:48px;
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px,11vw,64px); line-height:1;
  color:rgba(255,255,255,.055); letter-spacing:.02em; text-align:center;
  user-select:none;
}

/* ═══════════ SCREEN 2 · STUDIO ═══════════ */

.screen-studio{padding:clamp(16px,4vh,28px) var(--pad) 0}

.studio-grid{
  width:100%; max-width:1080px; margin:0 auto;
  display:flex; flex-direction:column; gap:22px;
}

.stage{display:flex;flex-direction:column;align-items:center;gap:12px}

/* ── solo / team switch ── */
.modes{
  display:flex;gap:4px;padding:4px;border-radius:12px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);
}
.mode{
  -webkit-tap-highlight-color:transparent;
  min-height:44px;padding:0 20px;border:0;border-radius:9px;cursor:pointer;
  background:none;color:var(--ink);opacity:.8;
  font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  transition:background-color .16s var(--ease),opacity .16s var(--ease),color .16s var(--ease);
}
.mode:hover{opacity:1}
.mode.is-on{background:var(--yellow);color:#07321b;opacity:1}
.mode:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* ── team roster ── */
.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{
  -webkit-tap-highlight-color:transparent;
  position:relative;aspect-ratio:1;padding:0;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.28);
  border-radius:50%;overflow:hidden;color:var(--ink);
  display:grid;place-items:center;
  transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
.slot:hover{border-color:var(--yellow);background:rgba(254,225,1,.1)}
.slot:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.slot.is-filled{border-style:solid;border-color:var(--yellow)}
.slot canvas{width:100%;height:100%;display:block}
.slot .plus{font-size:20px;font-weight:400;opacity:.6;line-height:1}
.slot .num{
  position:absolute;bottom:0;left:0;right:0;
  font-size:9px;letter-spacing:.08em;font-weight:700;
  background:rgba(0,0,0,.5);padding:2px 0;
}
.roster-names{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.roster-hint{
  margin:0;font-size:10px;letter-spacing:.08em;opacity:.8;line-height:1.5;
}
.name-mini{
  width:100%;min-height:42px;padding:0 12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:9px;color:var(--ink);font-family:var(--mono);font-size:16px;
}
.name-mini::placeholder{color:rgba(255,255,255,.34)}
.name-mini:focus{outline:none;border-color:var(--yellow);background:rgba(254,225,1,.07)}

.canvas-wrap{
  /* deliberately unrounded: the preview is pixel-for-pixel the file you
     download, so no CSS may shave the artwork */
  position:relative; width:100%; max-width:min(430px,72vh);
  aspect-ratio:1; overflow:hidden;
  background:var(--green-deep);
  box-shadow:0 22px 54px -18px rgba(0,0,0,.62);
  touch-action:none; cursor:grab;
}
.canvas-wrap:active{cursor:grabbing}
#preview{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}

/* team output is a 16:9 post graphic, not an avatar */
.canvas-wrap.is-team{aspect-ratio:16/9;max-width:min(560px,90vw);cursor:default}
.is-team .x-ring{display:none}

/* 4:5 — the tallest ratio X shows uncropped in the timeline.
   Width is capped in vh because height = width × 1.25 here; cap the width and
   the tall card still leaves the download button above the fold. */
.canvas-wrap.is-card{aspect-ratio:4/5;max-width:min(330px,41vh)}
.is-card .x-ring{display:none}

.mode{flex:1;padding:0 10px;min-height:46px}

/* dotted overlay showing exactly what X keeps after its circular crop */
.x-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px dashed rgba(255,255,255,.42);
  pointer-events:none; opacity:0; transition:opacity .5s var(--ease);
}
.x-ring.is-on{opacity:1}

.stage-busy{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,63,34,.72)}
.spinner{
  width:30px;height:30px;border-radius:50%;
  border:3px solid rgba(255,255,255,.22);border-top-color:var(--yellow);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.stage-hint{
  margin:0; font-size:10px; letter-spacing:.12em; font-weight:600;
  opacity:.78; text-align:center;
}

.panel{display:flex;flex-direction:column;gap:18px}

/* On a phone the primary action must be reachable without scrolling, so the
   order is: pick a style → download/share → fine-tuning underneath. */
.ctl-style{order:1}
.ctl-team  {order:2}
.actions   {order:3}
.share-note{order:4}
.ctl-zoom  {order:5}
.ctl-tag   {order:6}

.ctl{display:flex;flex-direction:column;gap:10px}
.ctl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:22px}
.ctl-label{font-size:10px;letter-spacing:.16em;font-weight:700;opacity:.78}
.opt{opacity:.72;font-weight:500;letter-spacing:.1em}

.linkbtn{
  background:none;border:0;padding:4px 2px;cursor:pointer;color:var(--yellow);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;font-weight:700;
  text-transform:uppercase;opacity:.85;
}
.linkbtn:hover{opacity:1}
.linkbtn:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;border-radius:4px}

.variants{display:flex;gap:8px}
.chip{
  -webkit-tap-highlight-color:transparent;
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 10px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:11px; color:var(--ink);
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.07em;
  transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
.chip:hover{border-color:rgba(255,255,255,.32)}
.chip.is-on{background:rgba(254,225,1,.13);border-color:var(--yellow)}
.chip:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.sw{width:13px;height:13px;border-radius:50%;flex:none;border:2px solid rgba(0,0,0,.25)}
.sw-sunrise{background:linear-gradient(155deg,#FFC53D 0%,#E8543C 55%,#4A1563 100%)}
.sw-signal{background:linear-gradient(155deg,#FF3D8F 0%,#B01070 45%,#0B0435 100%)}
.sw-sand{background:linear-gradient(155deg,#FBF0CE 0%,#2FD3C4 55%,#0B72B8 100%)}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:none;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-11px;
  border-radius:50%;background:var(--yellow);border:3px solid var(--green);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--yellow);
  border:3px solid var(--green);box-shadow:0 2px 8px rgba(0,0,0,.4);
}
input[type=range]:focus-visible{outline:2px solid var(--yellow);outline-offset:4px;border-radius:6px}

.switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.track{
  width:44px;height:26px;border-radius:999px;background:rgba(255,255,255,.16);
  display:block;padding:3px;transition:background-color .18s var(--ease);
}
.thumb{
  display:block;width:20px;height:20px;border-radius:50%;background:#fff;
  transition:transform .18s var(--ease);
}
.switch input:checked + .track{background:var(--yellow)}
.switch input:checked + .track .thumb{transform:translateX(18px);background:var(--green)}
.switch input:focus-visible + .track{outline:2px solid var(--yellow);outline-offset:3px}

.switch-inline{gap:8px;flex-direction:row-reverse}
.switch-cap{
  font-size:10px;letter-spacing:.12em;font-weight:700;opacity:.78;
  text-transform:uppercase;
}

.tag-fields{display:flex;flex-direction:column;gap:10px}
.field{
  width:100%;min-height:50px;padding:0 16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:11px;color:var(--ink);
  font-family:var(--mono);font-size:16px;/* 16px = no iOS zoom-on-focus */
}
.field::placeholder{color:rgba(255,255,255,.34)}
.field:focus{outline:none;border-color:var(--yellow);background:rgba(254,225,1,.07)}

.class-out{
  margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.12em;
}
.class-lbl{opacity:.75;font-weight:600}
.class-out strong{color:var(--pink);font-weight:700;letter-spacing:.1em}

.actions{display:flex;flex-direction:column;gap:10px}
.actions .btn{width:100%}
.btn-x{background:#fff;color:#000}
.btn-x:hover{background:#e8e8e8}
.btn-ghost{
  background:none;color:var(--ink);border:1px solid rgba(255,255,255,.2);
  min-height:48px;font-size:12px;opacity:.88;
}
.btn-ghost:hover{opacity:1;border-color:rgba(255,255,255,.4)}

.share-note{
  margin:0;min-height:16px;font-size:10.5px;letter-spacing:.09em;
  opacity:.8;text-align:center;line-height:1.5;
}

/* ─────────── toast ─────────── */
.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px);z-index:60;
  max-width:calc(100vw - 32px);
  background:var(--cream);color:#07321b;
  padding:13px 20px;border-radius:11px;
  font-size:12px;font-weight:600;letter-spacing:.04em;text-align:center;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.55);
  opacity:0;transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast.is-err{background:var(--pink);color:#fff}

/* ─────────── entrances ─────────── */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* Gated behind .js-anim (set by script on boot). Without it everything is
   simply visible — an entrance animation must never be able to leave
   content stuck at opacity 0. */
.js-anim .screen-upload.is-active .upload-inner>*{animation:riseIn .5s var(--ease) both}
.js-anim .screen-upload.is-active .eyebrow{animation-delay:.02s}
.js-anim .screen-upload.is-active .display{animation-delay:.07s}
.js-anim .screen-upload.is-active .lede{animation-delay:.12s}
.js-anim .screen-upload.is-active .drop{animation-delay:.17s}
.js-anim .screen-upload.is-active .trust{animation-delay:.22s}

.js-anim .screen-studio.is-active .stage{animation:popIn .45s var(--ease) both}
.js-anim .screen-studio.is-active .panel{animation:riseIn .45s .07s var(--ease) both}

/* short phones (iPhone SE) — tighten so Share clears the fold too */
@media (max-height:710px) and (max-width:899px){
  .studio-grid{gap:15px}
  .panel{gap:13px}
  .stage{gap:8px}
  .screen-studio{padding-top:12px}
  /* the roster adds a whole block of height that solo mode doesn't have */
  .roster{gap:6px}
  .roster-names{gap:6px;margin-top:2px}
  .name-mini{min-height:38px}
  .canvas-wrap.is-team{max-width:min(560px,86vw)}
}

/* ═══════════ ≥900px · desktop ═══════════ */
@media (min-width:900px){
  body{font-size:15px}
  .site-head{padding-top:26px}
  .screen-studio{padding-top:clamp(20px,5vh,48px);justify-content:center}
  .studio-grid{
    flex-direction:row;align-items:center;gap:clamp(32px,5vw,64px);
  }
  .stage{flex:1;min-width:0}
  .canvas-wrap{max-width:min(480px,62vh)}
  .panel{width:340px;flex:none;gap:24px}
  .actions{gap:12px}
  /* desktop has the room for the natural reading order */
  .ctl-style{order:1} .ctl-team{order:2} .ctl-zoom{order:3} .ctl-tag{order:4}
  .actions{order:5}   .share-note{order:6}
  .canvas-wrap.is-team{max-width:min(620px,58vw)}
}

/* ═══════════ reduced motion ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .x-ring{transition:none}
}