/* SOMOS v2 — "wonder" motion layer. Somos dark + Archivo kept; only mechanics borrowed. */
:root{
  --void:#0B0B0C; --slab:#1B1D1F; --bone:#EDE9E2; --ash:#94938E;
  --moss:#6E8C4A; --deepmoss:#3E5730; --ember:#E2542A; --neon:#FF3B2F;
  --ease-wonder:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth}

/* ---------- Cover intro: logo -> full storefront -> zoom in -> glass dissolve ---------- */
/* the negative margin lets the hero slide up under the sticky stage, so the
   phone's vh/innerHeight mismatch cannot leave a black strip at the hand-off */
/* -100vh: the hero sits BEHIND the last screen of the intro, so when the stage
   dissolves the site is already painted there — no black, no seam */
#v2-intro{position:relative;height:900vh;background:var(--void);
  margin-bottom:calc(-100vh - 80px);margin-bottom:calc(-100dvh - 80px)}
#v2-intro .photoB{transform-origin:60% 55%}
/* dvh, not vh: on phones vh is the *small* viewport, so a 100vh stage left a
   ~27px black strip under it at the hand-off. */
/* the extra 60px covers the phone vh/innerHeight mismatch that otherwise leaves
   a black strip under the stage */
/* fixed, not sticky: a sticky stage unpins near the end of its container and
   slides up, which let the page below peek in as a band. Fixed never unpins —
   it is simply faded out once the last push-in is done. */
#v2-intro .stage{position:fixed;inset:0;overflow:hidden;background:var(--void);
  will-change:opacity;z-index:1}
#v2-intro.done .stage{opacity:0!important;pointer-events:none;visibility:hidden}
/* dimmed full-bleed copy behind each framed photo: keeps the surround filled
   with the same picture instead of bare black, without any blur */
#v2-intro .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:brightness(.28);will-change:opacity}
#v2-intro .doorbg{object-position:88% 50%}
/* wrappers grow from "whole photo" to full-bleed; the img always covers them */
#v2-intro .doorwrap,#v2-intro .counterwrap{position:absolute;left:50%;top:50%;
  translate:-50% -50%;overflow:hidden;will-change:transform,width,height}
#v2-intro .doorwrap{transform-origin:88% 55%}
#v2-intro .counterwrap{transform-origin:53% 55%;opacity:1} /* the cup on the laptop screen */
#v2-intro .photoC{transform-origin:38% 60%}                /* the water */
#v2-intro .counterwrap img{width:100%;height:100%;object-fit:cover;display:block}
/* storefront: whole photo, black either side. The stretched-fill version read
   as a double image, so the plain frame is what stays. */
#v2-intro .doorwrap img{width:100%;height:100%;object-fit:cover;display:block}
#v2-intro .photoB{opacity:0;will-change:opacity;filter:brightness(.9)}
/* final layer: identical to the hero background, so the stage can release
   without any visible cut */
#v2-intro .photoC{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;will-change:transform,opacity}
#v2-intro .photo{opacity:0;will-change:opacity}
#v2-intro .glasswall{position:absolute;inset:0;opacity:0;
  background:rgba(11,11,12,.35);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  will-change:opacity}
#v2-intro .cover-logo{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;will-change:transform,opacity}
#v2-intro .cover-logo img{width:clamp(170px,26vmin,300px);height:auto;border-radius:50%;
  box-shadow:0 0 90px rgba(226,84,42,.28)}
#v2-intro .cover-logo p{font-family:"Space Mono","Noto Sans Thai",monospace;font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ash);margin:0;
  animation:v2-nudge 2.4s var(--ease-wonder) infinite}
/* phones: hold the doorway in frame as the crop tightens */
@media (max-width:820px),(orientation:portrait){
  #v2-intro .doorwrap img{object-position:88% 50%}
}
/* NB: never hide the stage. Hiding it at the end exposed the last 100vh of the
   intro container, which is what read as a black frame before the site. The
   sticky stage simply unpins and the hero pushes it up. */
#v2-intro.done{pointer-events:none}

/* ---------- Glass tiles ---------- */
.v2-glass{background:rgba(255,255,255,.14)!important;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.25)!important;border-radius:24px}

/* ---------- Rotating scroll badge ---------- */
.v2-badge{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:96px;height:96px;z-index:20;cursor:pointer;color:var(--bone)}
.v2-badge svg{width:100%;height:100%;animation:v2-spin 22s linear infinite}
.v2-badge .chev{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"Space Mono",monospace;font-size:18px;animation:v2-nudge 2.4s var(--ease-wonder) infinite}
@keyframes v2-spin{to{transform:rotate(360deg)}}
@keyframes v2-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- Parallax helpers ---------- */
.v2-par{will-change:transform}

/* ---------- Menu ring ---------- */
#v2-ring{position:relative;height:380px;margin-top:2.5rem;overflow:hidden;border-radius:24px}
#v2-ring .sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 22%;filter:brightness(.82) saturate(.9)}
#v2-ring::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,0) 45%,rgba(11,11,12,.65) 100%)}
#v2-ring .wheel,#v2-ring .hint{z-index:2}
#v2-ring .wheel{position:absolute;left:50%;top:760px;width:0;height:0;
  transition:transform .8s var(--ease-wonder);will-change:transform}
.v2-card{position:absolute;left:0;top:0;width:210px;height:210px;margin:-105px 0 0 -105px;
  border-radius:32px;padding:22px 20px;cursor:pointer;user-select:none;
  transition:opacity .7s var(--ease-wonder),filter .7s var(--ease-wonder);
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 18px 50px rgba(0,0,0,.45)}
.v2-card h4{font-family:"Archivo Black","Noto Sans Thai",sans-serif;font-size:21px;
  line-height:1.05;text-transform:uppercase;margin:0;color:#20241B}
.v2-card p{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;margin:0;color:#20241bcc}
.v2-card .glyph{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
  background:rgba(32,36,27,.14);display:flex;align-items:center;justify-content:center;
  font-family:"Space Mono",monospace;font-size:12px;color:#20241B}
.v2-card:not(.active){filter:saturate(.75) brightness(.82);opacity:.85}
.v2-card.active{box-shadow:0 24px 70px rgba(0,0,0,.6)}
#v2-ring .hint{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--ash)}

/* panel swap */
#menu .v2-panel-anim{animation:v2-rise .7s var(--ease-wonder)}
@keyframes v2-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Gallery dots ---------- */
.v2-dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.v2-dots span{width:22px;height:4px;border-radius:2px;background:#ffffff26;
  transition:background .6s var(--ease-wonder)}
.v2-dots span.on{background:var(--ember)}

/* slow the v1 reveals to wonder pace */
.rv{transition:opacity .8s var(--ease-wonder),transform .8s var(--ease-wonder)!important;
  transform:translateY(22px)}
.rv.is-in{transform:none}

@media (prefers-reduced-motion:reduce){
  #v2-intro{height:100vh}
  #v2-intro .photo{transform:none}
  .v2-badge svg,.v2-badge .chev{animation:none}
  html{scroll-behavior:auto}
}

/* ---- mobile hamburger nav ---- */
.v2-burger { display: none; }
.v2-mnav { display: none; }

@media (max-width: 767px) {
  .v2-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 34px; padding: 0 7px; cursor: pointer;
    background: transparent; border: 1px solid rgba(255,255,255,.12);
  }
  .v2-burger span {
    display: block; height: 1.5px; width: 100%; background: #ede9e2;
    transition: transform .2s ease, opacity .15s ease;
  }
  .v2-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .v2-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .v2-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .v2-mnav.open { display: block; }
  .v2-mnav {
    border-top: 1px solid rgba(255,255,255,.06);
    background: #0b0b0c; padding: .5rem 1.25rem 1.25rem;
    max-height: calc(100dvh - 72px); overflow-y: auto;
  }
  .v2-mnav a {
    display: block; padding: .95rem 0; text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-family: "Space Mono", "Noto Sans Thai", monospace;
    text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; color: #ede9e2;
  }
  .v2-mnav a:last-child { border-bottom: 0; }
  .v2-mnav a.grab { margin-top: .9rem; text-align: center; padding: .95rem;
    background: #e2542a; border: 1px solid #e2542a; }
}

/* ---- tighter mobile header ---- */
@media (max-width: 767px) {
  header > div:first-child { padding-top: .6rem; padding-bottom: .6rem; gap: .5rem; }
  .v2-hdr-tag { display: none; }
  .v2-hdr-logo { height: 2rem; width: 2rem; }
  .v2-hdr-pill {
    white-space: nowrap; font-size: 9.5px; letter-spacing: .04em;
    padding: .3rem .5rem; gap: .35rem;
  }
  .v2-hdr-pill .h-2 { height: .375rem; width: .375rem; }
}

/* On phones the hero text is full-width, so the badge needs its own strip of
   space under the copy rather than floating on top of it. */
@media (max-width: 767px) {
  #top > div { padding-bottom: 130px; }
  .v2-badge { width: 78px; height: 78px; bottom: 18px; }
  .v2-badge .chev { font-size: 15px; }
}