/* Artwork crop coordinates are measured in the supplied images, not the viewport.
   Mobile: x=0, y=220, w=853, h=1060. Desktop: x=590, y=56, w=946, h=904.
   Masks stay on the crop window; only the image inside it moves. */
.hero {
  --scene: #010b17;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  padding: max(92px, 12svh) 0 max(18px, env(safe-area-inset-bottom));
  isolation: isolate;
  overflow: hidden;
  background: var(--scene);
}
.site-header {
  position: absolute; inset: 0 0 auto;
  height: calc(70px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 4.6% 0;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 3;
}
.wordmark {font-family:Cormorant,Georgia,serif;font-weight:600;letter-spacing:.18em;color:var(--gold);white-space:nowrap;font-size:clamp(15px,3.9vw,29px)}
.site-header>.wordmark {position:absolute;left:50%;transform:translateX(-50%)}
.icon-button {display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:0;width:44px;height:44px;border-radius:50%;transition:background .2s,color .2s;flex-shrink:0}
.icon-button:hover {background:#b9eafb12;color:var(--ice)}
.menu-button svg {width:21px;height:21px;stroke-width:1.25}
.account-button svg {width:25px;height:25px}
.desktop-nav {display:none}
.artwork {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 853 / 1060;
  overflow: hidden;
  /* Side fades are limited to 20 source pixels; silhouette begins at x=62
     and ends at x=818. Bottom fade begins below the sculpture, in reflection. */
  mask-image: linear-gradient(to right, transparent, #000 2.4%, #000 97.6%, transparent),
              linear-gradient(to bottom, transparent, #000 7%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
.artwork picture {display:contents}
.artwork-image {
  position:absolute; display:block;
  width:100%; max-width:none; height:auto;
  left:0; top:-20.754717%;
  animation:artwork-drift 24s linear infinite;
  transform-origin:50% 50%;
  will-change:transform;
}
/* Temporary still-image motion. No rotation or 3D recreation is claimed. */
@keyframes artwork-drift {
  0%,100% {transform:translate(0,0) scale(1)}
  25% {transform:translate(.08%,.04%) scale(1.001)}
  50% {transform:translate(0,.08%) scale(1.002)}
  75% {transform:translate(-.08%,.04%) scale(1.001)}
}
.hero[data-motion="paused"] .artwork-image {animation-play-state:paused;will-change:auto}
.hero-copy {position:relative;width:100%;text-align:center;margin-top:12px;flex:none}
h1 {font-size:clamp(28px,8.2vw,48px);font-weight:400;letter-spacing:-.035em;line-height:1.2;margin:0;white-space:nowrap}
.hero-actions {display:flex;justify-content:center;gap:3vw;margin-top:clamp(26px,4svh,42px)}
.button {display:inline-flex;align-items:center;justify-content:center;gap:clamp(10px,2.5vw,22px);height:clamp(44px,10.2vw,56px);padding:0 18px;border-radius:8px;border:1px solid var(--text);font-size:clamp(15px,3.9vw,20px);line-height:1;transition:background .2s,border-color .2s,transform .2s}
.hero-actions .button {width:34%}
.button svg {width:23px;height:23px}
.primary {background:var(--ice);color:#001019;border-color:#d2f3ff}
.primary:hover {background:#d7f5ff;transform:translateY(-2px)}
.secondary {background:transparent}
.secondary:hover {background:#b9eafb10;border-color:var(--ice);transform:translateY(-2px)}
.scroll-cue {position:relative;margin: max(48px, 8svh) auto 0}
.scroll-cue svg {width:25px;height:25px}
@media(max-width:1099px) {
  html {scrollbar-width:none;scrollbar-gutter:auto}
  html::-webkit-scrollbar {display:none}
}
/* Tablets keep a broad artwork composition and may scroll beyond one screen.
   Short phones retain full width rather than shrinking the sculpture to fit. */
@media(min-width:600px) and (max-width:1099px) {
  .hero {padding-top:100px}
  .artwork {width:clamp(70%, calc((100svh - 360px) * 853 / 1060), 90%)}
  .hero-copy h1 {font-size:46px}
  .hero-actions {gap:22px;margin-top:36px}
  .hero-actions .button {width:180px}
  .site-header>.wordmark {font-size:28px}
  .scroll-cue {margin-top:32px}
}
@media(min-width:1100px) {
  .hero {display:block;height:max(100svh,700px);min-height:700px;padding:0}
  .site-header {height:88px;padding-left:4%;padding-right:3.5%;gap:30px}
  .site-header>.wordmark {position:static;transform:none;font-size:27px;letter-spacing:.2em}
  .menu-button {display:none}
  .desktop-nav {display:flex;margin-left:auto;gap:42px;font-size:21px}
  .desktop-nav a:hover {color:var(--ice)}
  .account-button svg {width:28px;height:28px}
  .artwork {
    position:absolute;
    width:min(62vw, calc((100svh - 118px) * 946 / 904));
    min-width:600px;
    aspect-ratio:946 / 904;
    right:2%;top:96px;
    /* A foreground guard keeps the upper loop fully opaque while the
       surrounding top/side background blends over a wider distance. */
    mask-image:url('assets/desktop-artwork-mask.svg');
    mask-size:100% 100%;
  }
  .artwork-image {width:162.367865%;left:-62.367865%;top:-6.19469%}
  .hero-copy {position:absolute;top:40%;left:5%;width:40%;margin:0;text-align:left}
  .hero-copy h1 {font-size:clamp(36px,3.9vw,64px);letter-spacing:-.03em}
  .hero-actions {justify-content:flex-start;gap:20px;margin-top:54px;padding-left:14px}
  .hero-actions .button {width:auto;min-width:173px;padding:0 26px;height:57px;font-size:21px}
  .scroll-cue {position:absolute;bottom:24px;left:50%;transform:translateX(-50%);margin:0}
  .sections {padding:0 60px}
  .content-section {padding:100px 0}
  .future-membership {gap:40px}
}
@media(prefers-reduced-motion:reduce) {.artwork-image {animation:none;will-change:auto}}