:root {
  --bg: #7A6656;
  --panel-top-bg: #4A3752;
  --panel-bottom-bg: #3C4A3E;
  --panel-right-bg: #0D1117;
  --ink: #f4f6f8;
  --muted: rgba(244, 246, 248, 0.55);
  --accent: #ECD078;
  --vignette-rgb: 96, 58, 40;
  --nav-h: 88px;
  --fray-color: #e8e6df;
  --loader-bg: color-mix(in srgb, var(--bg) 72%, rgb(var(--vignette-rgb)));
  --label-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.8);

  --p-top: 0px; --p-bottom: 0px; --p-left: 0px; --p-right: 0px;
  --rest-left: 0px; --rest-bottom: 0px;
  --split-y: 50vh;

  --s-main: #FFFFFF;
  --s-g1: #FF0000;
  --s-g2: #00FFFF;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background-color: #0b0f13; color: var(--ink); overflow-x: hidden; }
body { user-select: none; -webkit-user-select: none; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
::selection { background: var(--accent); color: rgb(var(--vignette-rgb)); }

#spacer { height: 165vh; width: 100%; }
@supports (height: 100dvh) {
  #spacer { height: 165dvh; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.mobile-only { display: none; }
body.mobile-mode .mobile-only { display: block; }
body.mobile-mode .desktop-only { display: none; }

body.mobile-mode {
  background-color: var(--bg);
}

body.mobile-mode #layer-bg { isolation: auto; z-index: 2; }
body.mobile-mode .reel { position: fixed; contain: paint; will-change: clip-path; pointer-events: auto; }
body.mobile-mode .reel.is-full { cursor: default; clip-path: none !important; }

.hero-fixed { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.hero-fixed a, .hero-fixed button { pointer-events: auto; }

.hero-copy { top: 50%; transform: translateY(-50%); }
.scroll-hint { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; }

.mobile-only .hero-copy { position: fixed; left: max(8vw, env(safe-area-inset-left)); width: min(40vw, 560px); z-index: 5; opacity: 0; transition: opacity .5s ease, transform .5s ease; }
.mobile-only .hero-copy.in { opacity: 1; }
.mobile-only .scroll-hint { position: fixed; left: max(8vw, env(safe-area-inset-left)); bottom: max(36px, calc(env(safe-area-inset-bottom) + 16px)); z-index: 5; transition: opacity .3s ease; }

.mobile-only .reel-controls { position: fixed; z-index: 10; opacity: 0; transition: opacity .6s ease; pointer-events: auto; }
.mobile-only .s-text { position: fixed; z-index: 8; opacity: 0; transform: translateY(16px); will-change: transform, opacity; }

body.mobile-mode .eyebrow::after { content: ''; display: block; width: 34px; height: 3px; margin-top: 8px; background: var(--accent); }
body.mobile-mode #mobileReelControls { border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); padding-top: 10px; }

@media (max-width: 760px) {
  .mobile-only .hero-copy { left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); width: auto; top: calc(var(--nav-h) + 16px); transform: none; }
  .mobile-only .scroll-hint { left: max(20px, env(safe-area-inset-left)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)); }
  .mobile-only .headline { font-size: clamp(34px, 9vw, 52px); }
  .mobile-only .eyebrow { font-size: clamp(22px, 7vw, 32px); }
  .mobile-only .nav { padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
  .mobile-only .s-text { font-size: clamp(22px, 6vw, 32px); padding: 8px 14px; }
}

.panel { position: fixed; overflow: visible; will-change: width, height, clip-path; transform: translateZ(0); contain: layout style; background: transparent; transition: filter .32s ease-out; }
html.panel-anim .panel { 
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1), height 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.panel-fray,
.panel-solid { position: absolute; inset: 0; }

.panel-fray {
  background-color: var(--fray-color);
  background-size: 800px 800px; /* becomes 300px because of generatePaperTexture() */
  background-repeat: repeat;
}

.panel-solid {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='crumple'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='4' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23fff' surfaceScale='3'%3E%3CfeDistantLight azimuth='45' elevation='40'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23crumple)'/%3E%3C/svg%3E");
  background-blend-mode: multiply;
  background-size: 350px 350px;
}

#panel-top .panel-solid { background-color: var(--panel-top-bg); }
#panel-bottom .panel-solid { background-color: var(--panel-bottom-bg); }
#panel-right-base .panel-solid,
#panel-right-fake .panel-solid { background-color: var(--panel-right-bg); }

#panel-top { left: 0; right: 0; top: 0; height: var(--p-top); z-index: 30; }
#panel-left { left: 0; top: 0; bottom: 0; width: max(var(--p-left), 36px); z-index: 40; }
#panel-bottom { left: 0; right: 0; bottom: 0; height: max(var(--p-bottom), 36px); z-index: 50; }

#panel-right-base { right: 0; top: 0; bottom: 0; width: max(var(--p-right), 84px); z-index: 20; clip-path: inset(0 0 calc(100vh - var(--split-y) - 1px) -30px); }
#panel-right-fake { right: 0; top: 0; bottom: 0; width: max(var(--p-right), 84px); z-index: 60; clip-path: inset(var(--split-y) 0 0 -30px); }

#panel-top { filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.7)); }
#panel-bottom { filter: drop-shadow(0px -10px 16px rgba(0, 0, 0, 0.7)); }
#panel-left { filter: drop-shadow(10px 0px 16px rgba(0, 0, 0, 0.7)); }
#panel-right-base, #panel-right-fake { filter: drop-shadow(-10px 0px 16px rgba(0, 0, 0, 0.7)); }

.panel-dest-img {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: calc(100vw + 80px);
  height: 100vh;
  clip-path: polygon(100% 0%, 100% 100%, 26px 100%, 40px 92%, 17px 81%, 38px 69%, 15px 58%, 42px 46%, 19px 34%, 35px 21%, 14px 10%, 28px 0%);
}
.panel-dest-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#panel-right-base.takeover-ready {
  z-index: 55;
  clip-path: none;
}
#panel-right-base.takeover-ready .panel-right-label { opacity: 0; pointer-events: none; }
#panel-right-base.takeover-ready .panel-solid { background-color: transparent; mix-blend-mode: multiply; }

html.transition-active #panel-left { width: max(var(--p-left), 0px); }
html.transition-active #panel-bottom { height: max(var(--p-bottom), 0px); }

#panel-top .panel-solid, #panel-top .panel-fray { background-position: bottom left; }
#panel-bottom .panel-solid, #panel-bottom .panel-fray { background-position: top left; }
#panel-left .panel-solid, #panel-left .panel-fray { background-position: top right; }
#panel-right-base .panel-solid, #panel-right-base .panel-fray,
#panel-right-fake .panel-solid, #panel-right-fake .panel-fray { background-position: top left; }

#panel-top .panel-solid { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 18px), 93% calc(100% - 32px), 82% calc(100% - 14px), 71% calc(100% - 38px), 60% calc(100% - 20px), 52% calc(100% - 45px), 43% calc(100% - 18px), 32% calc(100% - 34px), 23% calc(100% - 15px), 14% calc(100% - 40px), 5% calc(100% - 22px), 0% calc(100% - 30px)); }
#panel-top .panel-fray { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 8px), 92% calc(100% - 18px), 84% calc(100% - 6px), 73% calc(100% - 24px), 62% calc(100% - 9px), 50% calc(100% - 30px), 41% calc(100% - 10px), 30% calc(100% - 20px), 21% calc(100% - 5px), 12% calc(100% - 26px), 7% calc(100% - 12px), 0% calc(100% - 15px)); }
#panel-bottom .panel-solid { clip-path: polygon(0% 100%, 100% 100%, 100% 30px, 92% 16px, 81% 42px, 69% 18px, 60% 36px, 48% 15px, 37% 40px, 28% 20px, 18% 38px, 9% 14px, 0% 28px); }
#panel-bottom .panel-fray { clip-path: polygon(0% 100%, 100% 100%, 100% 15px, 93% 6px, 83% 24px, 70% 8px, 58% 20px, 49% 5px, 39% 22px, 26% 8px, 16% 20px, 10% 6px, 0% 14px); }
#panel-left .panel-solid { clip-path: polygon(0% 0%, 0% 100%, calc(100% - 25px) 100%, calc(100% - 42px) 91%, calc(100% - 18px) 80%, calc(100% - 35px) 68%, calc(100% - 15px) 55%, calc(100% - 40px) 43%, calc(100% - 20px) 31%, calc(100% - 38px) 18%, calc(100% - 16px) 8%, calc(100% - 32px) 0%); }
#panel-left .panel-fray { clip-path: polygon(0% 0%, 0% 100%, calc(100% - 12px) 100%, calc(100% - 24px) 90%, calc(100% - 8px) 81%, calc(100% - 20px) 69%, calc(100% - 6px) 56%, calc(100% - 25px) 44%, calc(100% - 9px) 32%, calc(100% - 22px) 19%, calc(100% - 7px) 9%, calc(100% - 18px) 0%); }
#panel-right-base .panel-solid, #panel-right-fake .panel-solid { clip-path: polygon(100% 0%, 100% 100%, 26px 100%, 40px 92%, 17px 81%, 38px 69%, 15px 58%, 42px 46%, 19px 34%, 35px 21%, 14px 10%, 28px 0%); }
#panel-right-base .panel-fray, #panel-right-fake .panel-fray { clip-path: polygon(100% 0%, 100% 100%, 12px 100%, 24px 91%, 7px 82%, 22px 70%, 8px 59%, 25px 47%, 10px 35%, 20px 22%, 6px 11%, 15px 0%); }

.panel-right-label {
  position: absolute;
  top: 50%;
  left: 48px;
  right: auto;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  text-shadow: var(--label-shadow);
  white-space: nowrap;
  opacity: .85;
  z-index: 999;
  transition: opacity .2s ease;
}
.panel-right-label:hover { opacity: 1; }
.panel-right-label::after {
  content: '';
  position: absolute;
  z-index: 999;
  top: -13px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 5px 1px var(--accent), 0 0 12px 3px color-mix(in srgb, var(--accent) 50%, transparent);
  opacity: 0;
  transform: translateX(-50%) scale(.4);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.panel-right-label:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

.paper-left { position: absolute; right: 0; top: 0; bottom: 0; width: var(--rest-left); }
.paper-bottom { position: absolute; left: 0; right: 0; top: 0; height: var(--rest-bottom); }

.desktop-only .hero-copy { position: absolute; left: 12%; width: 560px; max-width: 76vw; }
.desktop-only .scroll-hint { position: absolute; left: 12%; bottom: 36px; }

.nav { position: absolute; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 max(32px, env(safe-area-inset-right)) 0 max(32px, env(safe-area-inset-left)); }

#panel-top .nav { top: auto; bottom: 24px; padding-top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
#panel-top .nav-item { justify-self: start; }
#panel-top .brand { justify-self: center; }

.nav-item--reach-out { position: relative; z-index: 999; margin-left: 12px; }
.nav-item--reach-out::after {
  content: '';
  position: absolute;
  z-index: 999;
  left: -13px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 5px 1px var(--accent), 0 0 12px 3px color-mix(in srgb, var(--accent) 50%, transparent);
  opacity: 0;
  transform: translateY(-50%) scale(.4);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.nav-item--reach-out:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }

.nav-item, .brand, .reel-label { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; }
.eyebrow, .headline { font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; }

.nav-item { font-size: 18px; text-decoration: none; color: var(--ink); text-shadow: var(--label-shadow); }

.mobile-only .nav-item { opacity: 0; animation: navItemIn .5s ease forwards; animation-delay: .2s; }
.mobile-only .brand { opacity: 0; animation: navItemIn .5s ease forwards; }
@keyframes navItemIn { to { opacity: 1; } }

.brand { font-size: 24px; letter-spacing: -0.02em; -webkit-text-stroke: 0.6px var(--ink); color: var(--ink); text-shadow: var(--label-shadow); }

.headline .brand-inline { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.02em; -webkit-text-stroke: 0.6px var(--ink); }
.eyebrow { font-size: clamp(28px, 4vw, 44px); color: var(--accent); margin: 0 0 4px; }
.headline { font-size: clamp(40px, 6vw, 72px); line-height: 0.95; margin: 0 0 24px; }
.sub { font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 42ch; margin: 0; }

#layer-bg { position: fixed; inset: 0; z-index: 10; isolation: isolate; }
.reel { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.reel.is-full { cursor: default; }
.reel > video { width: 100%; height: 100%; object-fit: cover; display: block; }

.s-text { pointer-events: auto; font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; text-decoration: none; font-size: clamp(28px, 3.5vw, 48px); letter-spacing: 0.06em; line-height: 1.05; text-shadow: var(--label-shadow); padding: clamp(8px,1vw,14px) 0; width: fit-content; transition: color .12s linear; }

.desktop-only.s-text { position: absolute; z-index: 12; }

.s-text::before, .s-text::after { content: attr(data-text); position: absolute; top: 50%; white-space: nowrap; z-index: -1; color: transparent; mix-blend-mode: screen; transition: -webkit-text-stroke-color .12s linear; }
.s-text::before { left: 50%; transform: translate(calc(-50% - 2.5px), -50%) translateZ(-4px); -webkit-text-stroke: 4.5px var(--s-g1); }
.s-text::after { left: 50%; transform: translate(calc(-50% + 2.5px), -50%) translateZ(-8px); -webkit-text-stroke: 4.5px var(--s-g2); }

.desk-s-text {
  --hx: 0;
  --hy: 0;
  transform: perspective(600px) translate3d(calc(var(--hx) * 3px), calc(var(--hy) * 3px), 0) rotateX(calc(var(--hy) * -6deg)) rotateY(calc(var(--hx) * -6deg));
  transition: color .12s linear, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
}

.desk-s-text:hover {
  transition: color .12s linear, transform 0.1s linear;
}

.reel-label { position: relative; font-size: 13px; letter-spacing: .06em; color: var(--ink); text-transform: uppercase; text-shadow: var(--label-shadow); display: inline-flex; align-items: center; }

.reel-btn { position: relative; appearance: none; border: 0; background: none; color: var(--ink); padding: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-shadow: 0 2px 7px rgba(0,0,0,0.35); transition: transform .2s cubic-bezier(.16,1,.3,1); }
.reel-btn:hover { transform: scale(1.12); }
.reel-btn:active { transform: scale(.92); }
.reel-btn .icon { position: absolute; width: 15px; height: 15px; display: block; opacity: 1; transform: scale(1) rotate(0deg); transition: opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1); }

.reel-controls { display: flex; align-items: center; gap: 10px; }

#deskReelLabel { position: absolute; z-index: 12; height: 38px; }
#deskReelControls { position: absolute; z-index: 15; }

.desktop-only .reel-btn { width: 38px; height: 38px; }
.desktop-only .reel-btn .icon { width: 17px; height: 17px; }

body.mobile-mode .reel-btn { width: 44px; height: 44px; }
.reel-btn, .nav-item, .scroll-hint { touch-action: manipulation; }

.reel-btn .icon-play { opacity: 0; transform: scale(.5) rotate(-10deg); }
.reel-btn[data-playing="false"] .icon-pause { opacity: 0; transform: scale(.5) rotate(10deg); }
.reel-btn[data-playing="false"] .icon-play { opacity: 1; transform: scale(1) rotate(0deg); }

.icon-sound .sound-wave, .icon-sound .sound-slash { transition: opacity .18s ease; }
.icon-sound .sound-slash { opacity: 0; }
.reel-btn[data-muted="true"] .icon-sound .sound-wave { opacity: 0; }
.reel-btn[data-muted="true"] .icon-sound .sound-slash { opacity: 1; }

.blend { color: #FFFFFF; mix-blend-mode: difference; }
.blend-excl { color: #FFFFFF; mix-blend-mode: exclusion; }

.s-text.blend, .s-text.blend-excl { color: var(--s-main); }

#loader { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: var(--loader-bg); transition: opacity .5s ease; filter: drop-shadow(0 0 0 rgba(0,0,0,0.01)); }
#loader.done { opacity: 0; pointer-events: none; }
#loader .dot { width: 7px; height: 7px; margin: 0 5px; border-radius: 50%; display: inline-block; background: var(--muted); animation: loaderPulse 1s ease-in-out infinite; }
#loader .dot:nth-child(2) { animation-delay: .15s; }
#loader .dot:nth-child(3) { animation-delay: .3s; }
@keyframes loaderPulse { 0%,100%{ opacity:.25; transform:scale(.8); } 50%{ opacity:1; transform:scale(1); } }

#glass-loader {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--loader-bg);
  opacity: 0;
  transition: opacity .38s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
#glass-loader.in { opacity: 1; }

.glass-shell {
  position: relative;
  width: min(30vw, 200px);
  height: min(30vw, 200px);
  border-radius: 34%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate3d(0, 0, 0) scale(0.72);
  opacity: 0;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.55), rgba(255,255,255,0) 45%),
    radial-gradient(circle at 72% 78%, rgba(255,255,255,0.16), rgba(255,255,255,0) 55%),
    color-mix(in srgb, var(--ink) 10%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.35),
    inset 0 1px 1px rgba(255,255,255,0.65),
    inset 0 -12px 24px rgba(0,0,0,0.25);
  will-change: transform, opacity;
  transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glass-shell::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -40%;
  right: -40%;
  height: 400px;
  background: radial-gradient(ellipse at center top, rgba(255,255,255,0.18), transparent 70%);
  filter: blur(40px);
  opacity: 0;
  transform-origin: center center;
  pointer-events: none;
}

#glass-loader.filled .glass-shell { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
#glass-loader.ascending .glass-shell { transition: none; }
#glass-loader.ascending .glass-shell.in-flight::after {
  opacity: 0.6;
}

.airdrop-ring {
  position: absolute;
  width: min(30vw, 200px);
  height: min(30vw, 200px);
  border-radius: 34%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8);
  animation: airdrop-pulse 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
  z-index: 205;
}

@keyframes airdrop-pulse {
  0% { transform: scale(0.16); opacity: 1; }
  100% { transform: scale(0.4); opacity: 0; }
}

.glass-mark {
  width: 58%;
  height: 58%;
  opacity: 0;
  transition: opacity .38s cubic-bezier(0.16, 1, 0.3, 1);
}
#glass-loader.filled .glass-mark { opacity: 1; }

html.lite {
  --bg: #E4D9D6;
  --ink: #2A1620;
  --muted: rgba(42, 22, 32, 0.58);
  --accent: #8C6A1D;
  --vignette-rgb: 58, 34, 42;
  --label-shadow: 0 1px 2px rgba(0,0,0,0.10);
}

html.lite .reel-btn,
html.lite .reel-label,
html.lite .blend,
html.lite .blend-excl {
  color: var(--ink);
  mix-blend-mode: normal;
}
html.lite .s-text::after, html.lite .s-text::before { display: none; }

@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001s !important; transition-duration:.001s !important; } }
.allow-select { user-select: text; -webkit-user-select: text; }