:root{
  --px:0;
  --py:0;
  --gold-0:#fff8d9;
  --gold-1:#fbe3ad;
  --gold-2:#d9ae70;
  --gold-3:#b5894b;
  --gold-4:#694824;
  --cream:#f3e2bf;
  --muted:#c6a46d;
  --bg:#020202;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:var(--bg)}
html{color-scheme:dark}
body{
  overflow:hidden;
  color:var(--cream);
  font-family:"Segoe UI Variable","Segoe UI","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

.site-shell{
  position:relative;
  width:100vw;
  height:100svh;
  min-height:620px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 47%,rgba(158,113,49,.10),transparent 37%),
    linear-gradient(180deg,#040404 0%,#010101 55%,#030201 100%);
}

.scene,.layer,.particles,.film-grain,.vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.scene{z-index:0;overflow:hidden}
.particles{z-index:2;width:100%;height:100%;opacity:.78}

.base-glow{
  inset:-10%;
  background:
    radial-gradient(ellipse at 50% 40%,rgba(251,227,173,.055),transparent 27%),
    radial-gradient(ellipse at 50% 78%,rgba(181,137,74,.10),transparent 27%),
    radial-gradient(circle at 19% 53%,rgba(105,73,36,.06),transparent 24%),
    radial-gradient(circle at 81% 52%,rgba(105,73,36,.06),transparent 24%);
  transform:
    translate3d(calc(var(--px) * -4px),calc(var(--py) * -3px),0)
    scale(1.025);
}

.haze{
  opacity:.25;
  filter:blur(35px);
  will-change:transform,opacity;
}
.haze-a{
  inset:10% 4% 28%;
  background:
    radial-gradient(ellipse at 34% 55%,rgba(181,137,74,.13),transparent 44%),
    radial-gradient(ellipse at 66% 43%,rgba(217,174,112,.10),transparent 45%);
  transform:translate3d(calc(var(--px) * -9px),calc(var(--py) * -4px),0);
  animation:hazeBreathe 10s ease-in-out infinite alternate;
}
.haze-b{
  inset:38% -5% 6%;
  background:
    radial-gradient(ellipse at 50% 82%,rgba(251,227,173,.095),transparent 38%),
    radial-gradient(ellipse at 17% 48%,rgba(105,73,36,.10),transparent 36%),
    radial-gradient(ellipse at 83% 48%,rgba(105,73,36,.10),transparent 36%);
  transform:translate3d(calc(var(--px) * 6px),calc(var(--py) * 4px),0);
  animation:hazeBreathe 13s ease-in-out infinite alternate-reverse;
}
@keyframes hazeBreathe{
  from{opacity:.18;filter:blur(39px)}
  to{opacity:.34;filter:blur(29px)}
}

.spotlight{
  left:50%;
  top:-18%;
  width:min(48vw,760px);
  height:76%;
  transform:translate3d(calc(-50% + var(--px) * 2px),calc(var(--py) * 1px),0);
  opacity:.38;
  background:conic-gradient(
    from 172deg at 50% 0%,
    transparent 0 43%,
    rgba(217,174,112,.025) 45%,
    rgba(251,227,173,.13) 49%,
    rgba(245,182,61,.025) 53%,
    transparent 57% 100%
  );
  filter:blur(9px);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 48%,transparent 95%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 48%,transparent 95%);
  animation:spotlightBreath 8s ease-in-out infinite;
}
@keyframes spotlightBreath{
  0%,100%{opacity:.27;filter:blur(11px)}
  50%{opacity:.46;filter:blur(8px)}
}

.mesh{
  width:37vw;
  height:70vh;
  top:8%;
  opacity:.23;
  background-image:
    radial-gradient(circle at center,rgba(217,174,112,.52) 0 1px,transparent 1.3px);
  background-size:10px 10px;
  mask-image:radial-gradient(ellipse at center,#000 0 18%,rgba(0,0,0,.7) 41%,transparent 73%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0 18%,rgba(0,0,0,.7) 41%,transparent 73%);
  will-change:transform;
}
.mesh-left{
  left:-17vw;
  transform:
    perspective(700px) rotateY(47deg) rotateZ(-3deg)
    translate3d(calc(var(--px) * -10px),calc(var(--py) * -5px),0);
}
.mesh-right{
  right:-17vw;
  transform:
    perspective(700px) rotateY(-47deg) rotateZ(3deg)
    translate3d(calc(var(--px) * 10px),calc(var(--py) * -5px),0);
}

.ray-field{
  position:absolute;
  z-index:1;
  left:0;right:0;
  top:30%;
  height:45%;
  pointer-events:none;
  transform:translate3d(calc(var(--px) * 3px),calc(var(--py) * 2px),0);
}
.ray-field i{
  position:absolute;
  display:block;
  height:1px;
  border-radius:999px;
  transform-origin:center;
  will-change:transform,opacity;
}

.ray-field-back{opacity:.34;filter:blur(.35px)}
.ray-field-back i{
  width:44vw;
  background:linear-gradient(90deg,transparent,rgba(194,121,22,.35),rgba(243,183,63,.18),transparent);
}
.ray-field-back i:nth-child(1){left:-9%;top:8%;transform:rotate(11deg);animation:rayA 10s ease-in-out infinite alternate}
.ray-field-back i:nth-child(2){left:-6%;top:31%;transform:rotate(6deg);animation:rayA 13s ease-in-out -2s infinite alternate}
.ray-field-back i:nth-child(3){left:-12%;top:68%;transform:rotate(-8deg);animation:rayB 12s ease-in-out -4s infinite alternate}
.ray-field-back i:nth-child(4){right:-9%;top:10%;transform:rotate(-11deg);animation:rayA 11s ease-in-out -1s infinite alternate}
.ray-field-back i:nth-child(5){right:-7%;top:36%;transform:rotate(-5deg);animation:rayB 14s ease-in-out -5s infinite alternate}
.ray-field-back i:nth-child(6){right:-12%;top:70%;transform:rotate(8deg);animation:rayA 12.5s ease-in-out -3s infinite alternate}

.ray-field-mid{opacity:.58;filter:drop-shadow(0 0 8px rgba(181,137,74,.16))}
.ray-field-mid i{
  width:40vw;
  background:linear-gradient(90deg,transparent,rgba(251,227,173,.16),rgba(225,187,124,.78),rgba(105,73,36,.16),transparent);
}
.ray-field-mid i:nth-child(1){left:-6%;top:18%;transform:rotate(8deg);animation:rayB 8.5s ease-in-out infinite alternate}
.ray-field-mid i:nth-child(2){left:-3%;top:56%;transform:rotate(-5deg);animation:rayA 11s ease-in-out -2.6s infinite alternate}
.ray-field-mid i:nth-child(3){right:-6%;top:19%;transform:rotate(-8deg);animation:rayB 9.2s ease-in-out -1.7s infinite alternate}
.ray-field-mid i:nth-child(4){right:-4%;top:55%;transform:rotate(5deg);animation:rayA 10.6s ease-in-out -3.2s infinite alternate}
.ray-field-mid i:nth-child(5){left:30%;top:91%;width:40vw;opacity:.12;animation:rayC 14s ease-in-out infinite alternate}

.ray-field-front{opacity:.95;filter:drop-shadow(0 0 14px rgba(217,174,112,.31))}
.ray-field-front i{
  width:31vw;
  height:1.45px;
  background:linear-gradient(90deg,transparent,rgba(255,248,217,.11),rgba(251,227,173,1),rgba(181,137,74,.28),transparent);
}
.ray-field-front i:nth-child(1){left:-4%;top:41%;transform:rotate(4deg);animation:rayC 7.6s ease-in-out infinite alternate}
.ray-field-front i:nth-child(2){left:-2%;top:80%;transform:rotate(-7deg);animation:rayA 9.3s ease-in-out -4s infinite alternate}
.ray-field-front i:nth-child(3){right:-4%;top:42%;transform:rotate(-4deg);animation:rayC 8.2s ease-in-out -1.2s infinite alternate}
.ray-field-front i:nth-child(4){right:-2%;top:80%;transform:rotate(7deg);animation:rayB 9.8s ease-in-out -3.4s infinite alternate}

@keyframes rayA{
  from{opacity:.34;translate:-2% 0;scale:.96 1}
  to{opacity:1;translate:3% 0;scale:1.045 1}
}
@keyframes rayB{
  from{opacity:.24;translate:2% 1px;scale:1 1}
  to{opacity:.86;translate:-3% -1px;scale:1.06 1}
}
@keyframes rayC{
  from{opacity:.45;filter:brightness(.85);scale:.94 1}
  to{opacity:1;filter:brightness(1.22);scale:1.04 1}
}

.floor-reflection{
  position:absolute;
  left:50%;
  bottom:-24vh;
  width:120vw;
  height:48vh;
  transform:
    translate3d(calc(-50% + var(--px) * -2px),calc(var(--py) * 2px),0)
    perspective(800px) rotateX(69deg);
  border-radius:50%;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 7.5%,
      rgba(216,137,24,.055) 7.7% 7.85%,
      transparent 8.05% 15%),
    repeating-linear-gradient(0deg,
      transparent 0 8%,
      rgba(214,137,26,.035) 8.25% 8.4%,
      transparent 8.6% 16%),
    radial-gradient(ellipse at 50% 0%,rgba(255,192,70,.12),transparent 42%);
  opacity:.38;
  filter:blur(.2px);
  mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.6) 40%,transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.6) 40%,transparent 92%);
}
.floor-reflection::before{
  content:"";
  position:absolute;
  left:50%;
  top:-8%;
  width:1px;
  height:76%;
  transform:translateX(-50%);
  background:linear-gradient(to bottom,rgba(255,229,161,.55),rgba(231,147,28,.14) 28%,transparent 100%);
  box-shadow:0 0 15px rgba(246,177,55,.16);
  opacity:.42;
}

.vignette{
  z-index:9;
  background:
    radial-gradient(ellipse at center,transparent 43%,rgba(0,0,0,.05) 62%,rgba(0,0,0,.48) 100%),
    linear-gradient(180deg,rgba(0,0,0,.12),transparent 22%,transparent 75%,rgba(0,0,0,.18));
}

.hero{
  position:relative;
  z-index:5;
  width:100%;
  height:100%;
  min-height:620px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:
    max(22px,env(safe-area-inset-top))
    24px
    max(20px,env(safe-area-inset-bottom));
  text-align:center;
  transform:translate3d(calc(var(--px) * 1.1px),calc(var(--py) * .7px),0);
}

.logo-stage{
  position:relative;
  width:clamp(260px,21vw,350px);
  aspect-ratio:590/514;
  margin-bottom:clamp(-8px,-.4vh,-2px);
  will-change:transform,opacity;
  transform:
    translate3d(calc(var(--px) * 3px),calc(var(--py) * 2px),0);
}

.logo-aura{
  position:absolute;
  inset:-18%;
  z-index:-2;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(251,227,173,.19) 0%,rgba(181,137,74,.085) 28%,rgba(105,73,36,.032) 50%,transparent 70%);
  filter:blur(17px);
  animation:logoAura 6.2s ease-in-out infinite;
}
@keyframes logoAura{
  0%,100%{opacity:.54;transform:scale(.97)}
  50%{opacity:.92;transform:scale(1.035)}
}

.monogram-img{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:
    saturate(1.05)
    contrast(1.035)
    drop-shadow(0 11px 15px rgba(0,0,0,.60))
    drop-shadow(0 0 12px rgba(217,174,112,.11));
  transform:translateZ(0);
}

.monogram-light{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(106deg,
      transparent 0 36%,
      rgba(255,255,255,0) 41%,
      rgba(255,249,222,.15) 45%,
      rgba(255,255,255,.92) 49.4%,
      rgba(255,241,196,.22) 53%,
      rgba(255,255,255,0) 58%,
      transparent 100%);
  -webkit-mask:url("cn-logo.png") center/contain no-repeat;
  mask:url("cn-logo.png") center/contain no-repeat;
  mix-blend-mode:screen;
  opacity:0;
  transform:translate3d(-95%,0,0);
  animation:monogramSweep 7.8s cubic-bezier(.28,.02,.18,1) 1.6s infinite;
  will-change:transform,opacity;
}

.monogram-glint{
  position:absolute;
  z-index:3;
  width:7px;
  height:7px;
  left:27%;
  top:12%;
  border-radius:50%;
  background:#fff9e2;
  box-shadow:
    0 0 7px 2px rgba(255,248,218,.70),
    0 0 18px 6px rgba(217,174,112,.25);
  opacity:0;
  animation:logoGlint 7.8s ease-in-out 1.6s infinite;
}

@keyframes monogramSweep{
  0%,15%{opacity:0;transform:translate3d(-95%,0,0)}
  24%{opacity:.18}
  38%{opacity:.82}
  56%{opacity:.15;transform:translate3d(98%,0,0)}
  100%{opacity:0;transform:translate3d(98%,0,0)}
}
@keyframes logoGlint{
  0%,22%,100%{opacity:0;transform:scale(.3)}
  31%{opacity:1;transform:scale(1)}
  38%{opacity:.12;transform:scale(.55)}
  44%{opacity:0;transform:scale(.25)}
}

.brand-lockup{
  position:relative;
  width:clamp(360px,34vw,535px);
  aspect-ratio:980/126;
  margin-top:clamp(-4px,-.2vh,0px);
  will-change:transform,opacity;
}

.brand-wordmark{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:
    saturate(1.04)
    contrast(1.025)
    drop-shadow(0 0 10px rgba(217,174,112,.08));
}

.brand-wordmark-light{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(105deg,
      transparent 0 35%,
      rgba(255,255,255,0) 42%,
      rgba(255,249,222,.16) 47%,
      rgba(255,255,255,.72) 50%,
      rgba(255,241,196,.15) 54%,
      rgba(255,255,255,0) 59%,
      transparent 100%);
  -webkit-mask:url("carnori-wordmark.png") center/contain no-repeat;
  mask:url("carnori-wordmark.png") center/contain no-repeat;
  mix-blend-mode:screen;
  opacity:0;
  transform:translate3d(-90%,0,0);
  animation:wordmarkSweep 9.4s cubic-bezier(.28,.02,.18,1) 2.0s infinite;
}

@keyframes wordmarkSweep{
  0%,16%{opacity:0;transform:translate3d(-90%,0,0)}
  27%{opacity:.16}
  42%{opacity:.64}
  58%{opacity:.10;transform:translate3d(95%,0,0)}
  100%{opacity:0;transform:translate3d(95%,0,0)}
}

.brand-rule{
  width:min(330px,46vw);
  margin:clamp(17px,2.25vh,24px) auto 0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:13px;
}
.brand-rule span{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(229,162,47,.82));
}
.brand-rule span:last-child{
  background:linear-gradient(90deg,rgba(229,162,47,.82),transparent);
}
.brand-rule b{
  width:6px;height:6px;border-radius:50%;
  background:#ffe5a1;
  box-shadow:
    0 0 6px 2px rgba(255,200,85,.38),
    0 0 18px 5px rgba(218,137,24,.12);
  animation:ruleSpark 4.5s ease-in-out infinite;
}
@keyframes ruleSpark{
  0%,100%{opacity:.55;transform:scale(.76)}
  50%{opacity:1;transform:scale(1.16)}
}

.copy-block{
  margin-top:clamp(22px,2.9vh,32px);
}

h1{
  margin:0;
  color:#f3e2bf;
  font-weight:300;
  font-size:clamp(52px,5.9vw,90px);
  letter-spacing:.006em;
  line-height:.98;
  text-shadow:
    0 1px 0 rgba(255,255,255,.07),
    0 0 28px rgba(241,177,59,.05);
}

.subtitle{
  margin:clamp(17px,2.15vh,24px) 0 0;
  color:#c9a66d;
  font-weight:300;
  font-size:clamp(16px,1.48vw,23px);
  letter-spacing:.15em;
  line-height:1.5;
}

.ornament{
  width:min(238px,38vw);
  margin:clamp(26px,3.5vh,36px) auto clamp(22px,3vh,30px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:center;
}
.ornament span{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(236,172,55,.80));
}
.ornament span:last-child{
  background:linear-gradient(90deg,rgba(236,172,55,.80),transparent);
}
.ornament b{
  width:12px;height:12px;
  transform:rotate(45deg);
  background:linear-gradient(135deg,#6f3b08,#f0ae34 42%,#ffe085 52%,#8b4d0b);
  box-shadow:
    0 0 12px rgba(238,163,42,.20),
    inset 0 0 2px rgba(255,248,207,.65);
  animation:diamond 5.4s ease-in-out infinite;
}
@keyframes diamond{
  0%,100%{filter:brightness(.82);scale:.92}
  50%{filter:brightness(1.25);scale:1.06}
}

.tagline{
  margin:0;
  padding-left:.36em;
  color:#b5894b;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(16px,1.55vw,24px);
  letter-spacing:.36em;
  line-height:1;
  text-shadow:0 0 16px rgba(224,153,37,.08);
}

.horizon-wrap{
  position:absolute;
  left:50%;
  bottom:clamp(66px,8.7vh,92px);
  width:min(88vw,1480px);
  height:112px;
  transform:translateX(-50%);
  pointer-events:none;
}
.horizon-glow{
  position:absolute;
  left:19%;right:19%;
  top:25%;
  height:65%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,185,57,.16),rgba(179,99,10,.035) 45%,transparent 69%);
  filter:blur(15px);
  animation:horizonBreath 7.2s ease-in-out infinite;
}
@keyframes horizonBreath{
  0%,100%{opacity:.48;scale:.98}
  50%{opacity:1;scale:1.025}
}
.horizon-line{
  position:absolute;
  left:0;right:0;
  top:50%;
  height:58px;
  overflow:hidden;
}
.horizon-line::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:24px;
  height:38px;
  border-top:1px solid transparent;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,222,142,.88) 0 1px,rgba(243,168,44,.60) 2px,transparent 7px) top center/100% 10px no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(219,143,29,.16);
}
.horizon-line::after{
  content:"";
  position:absolute;
  left:2%;right:2%;
  top:25px;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(150,83,8,.08) 10%,
    rgba(213,133,20,.36) 34%,
    rgba(255,215,126,.92) 49%,
    #fff1bd 50%,
    rgba(255,215,126,.92) 51%,
    rgba(213,133,20,.36) 66%,
    rgba(150,83,8,.08) 90%,
    transparent 100%
  );
  box-shadow:
    0 0 8px rgba(255,185,55,.26),
    0 0 24px rgba(221,132,20,.10);
  transform:perspective(600px) rotateX(1deg);
}

.domain{
  position:absolute;
  left:50%;
  bottom:clamp(24px,3.1vh,34px);
  transform:translateX(-50%);
  padding-left:.36em;
  color:#a77b43;
  text-decoration:none;
  font-size:clamp(13px,1.08vw,17px);
  letter-spacing:.36em;
  transition:color .25s ease,text-shadow .25s ease;
}
.domain:hover{
  color:#e0bd85;
  text-shadow:0 0 14px rgba(228,150,29,.22);
}

.intro{
  opacity:0;
  will-change:transform,opacity,filter;
}
body.is-ready .intro-1{animation:introLogo 1.25s cubic-bezier(.16,.76,.2,1) .18s forwards}
body.is-ready .intro-2{animation:introUp .80s cubic-bezier(.18,.72,.22,1) .72s forwards}
body.is-ready .intro-3{animation:introRule .82s cubic-bezier(.18,.72,.22,1) .88s forwards}
body.is-ready .intro-4{animation:introUp .88s cubic-bezier(.18,.72,.22,1) 1.02s forwards}
body.is-ready .intro-5{animation:introUp .82s cubic-bezier(.18,.72,.22,1) 1.18s forwards}
body.is-ready .intro-6{animation:introRule .80s cubic-bezier(.18,.72,.22,1) 1.31s forwards}
body.is-ready .intro-7{animation:introUp .82s cubic-bezier(.18,.72,.22,1) 1.42s forwards}
body.is-ready .intro-8{animation:introHorizon 1.35s cubic-bezier(.16,.74,.2,1) 1.48s forwards}
body.is-ready .intro-9{animation:introUp .75s cubic-bezier(.18,.72,.22,1) 1.78s forwards}

@keyframes introLogo{
  0%{opacity:0;transform:translate3d(calc(var(--px) * 2.5px),32px,0) scale(.78);filter:blur(12px) brightness(1.35)}
  52%{opacity:1;filter:blur(1px) brightness(1.12)}
  100%{opacity:1;transform:translate3d(calc(var(--px) * 2.5px),calc(var(--py) * 1.8px),0) scale(1);filter:blur(0) brightness(1)}
}
@keyframes introUp{
  from{opacity:0;transform:translate3d(0,17px,0);filter:blur(5px)}
  to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}
@keyframes introRule{
  from{opacity:0;transform:scaleX(.28);filter:blur(2px)}
  to{opacity:1;transform:scaleX(1);filter:blur(0)}
}
@keyframes introHorizon{
  from{opacity:0;transform:translateX(-50%) scaleX(.18);filter:blur(7px)}
  to{opacity:1;transform:translateX(-50%) scaleX(1);filter:blur(0)}
}

.intro-flare{
  position:absolute;
  z-index:8;
  pointer-events:none;
  left:50%;top:25%;
  width:4px;height:4px;
  border-radius:50%;
  opacity:0;
  background:#fff5cf;
  box-shadow:
    0 0 12px 4px rgba(255,224,150,.48),
    0 0 45px 18px rgba(228,147,29,.15);
}
body.is-ready .intro-flare{
  animation:introFlare 2.4s cubic-bezier(.2,.7,.2,1) .37s forwards;
}
@keyframes introFlare{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  19%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  52%{opacity:.22;transform:translate(-50%,140px) scale(.62)}
  100%{opacity:0;transform:translate(-50%,335px) scale(.22)}
}

.film-grain{
  z-index:12;
  opacity:.075;
  background-image:
    radial-gradient(circle at 20% 15%,rgba(255,255,255,.55) 0 .45px,transparent .7px),
    radial-gradient(circle at 70% 40%,rgba(255,255,255,.40) 0 .45px,transparent .7px),
    radial-gradient(circle at 40% 80%,rgba(255,255,255,.35) 0 .45px,transparent .7px);
  background-size:7px 7px,9px 9px,11px 11px;
  mix-blend-mode:soft-light;
  animation:grainShift .42s steps(2,end) infinite;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.54),rgba(0,0,0,.12) 30%,rgba(0,0,0,.08) 73%,rgba(0,0,0,.42));
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.54),rgba(0,0,0,.12) 30%,rgba(0,0,0,.08) 73%,rgba(0,0,0,.42));
}
@keyframes grainShift{
  0%{translate:0 0}
  25%{translate:1px -1px}
  50%{translate:-1px 1px}
  75%{translate:1px 1px}
  100%{translate:0 0}
}

.mobile-orbit{display:none}

@media (max-height:760px) and (min-width:760px){
  .hero{transform:scale(.90)}
  .horizon-wrap{bottom:50px}
  .domain{bottom:14px}
}

@media (max-width:760px){
  body{overflow:hidden}
  .site-shell{min-height:100svh}

  .scene{
    background:
      radial-gradient(ellipse at 50% 33%,rgba(169,97,12,.10),transparent 33%),
      linear-gradient(180deg,#030303 0%,#010101 57%,#040201 100%);
  }

  .hero{
    min-height:100svh;
    justify-content:flex-start;
    padding:
      max(6.3svh,env(safe-area-inset-top))
      18px
      max(20px,env(safe-area-inset-bottom));
  }

  .logo-stage{
    width:min(67vw,286px);
    margin-bottom:-.5svh;
  }

  .brand-lockup{
    width:min(78vw,350px);
    margin-top:-.8svh;
  }

  .brand-rule{
    width:min(58vw,280px);
    margin-top:2.7svh;
  }

  .copy-block{
    margin-top:3.2svh;
    width:100%;
  }

  h1{
    font-size:clamp(44px,12.8vw,66px);
    line-height:1.02;
    white-space:nowrap;
  }

  .subtitle{
    width:min(90vw,520px);
    margin:2.2svh auto 0;
    font-size:clamp(14px,4vw,18px);
    line-height:1.55;
    letter-spacing:.07em;
  }

  .ornament{
    width:min(50vw,210px);
    margin:3.2svh auto 2.7svh;
  }

  .tagline{
    font-size:clamp(15px,4.6vw,20px);
    letter-spacing:.22em;
    padding-left:.22em;
  }

  .spotlight{
    top:-7%;
    width:90vw;
    height:62%;
    opacity:.55;
  }

  .mesh{
    width:58vw;
    height:58vh;
    top:29%;
    opacity:.17;
  }
  .mesh-left{left:-36vw}
  .mesh-right{right:-36vw}

  .ray-field{
    top:42%;
    height:36%;
  }
  .ray-field-back i{width:58vw}
  .ray-field-mid i{width:53vw}
  .ray-field-front i{width:45vw}

  .ray-field-back i:nth-child(1),
  .ray-field-back i:nth-child(4){top:14%}
  .ray-field-mid i:nth-child(1),
  .ray-field-mid i:nth-child(3){top:28%}
  .ray-field-front i:nth-child(1),
  .ray-field-front i:nth-child(3){top:43%}

  .floor-reflection{
    width:180vw;
    height:42vh;
    bottom:-8vh;
    opacity:.64;
  }
  .floor-reflection::before{
    height:94%;
    opacity:.62;
  }

  .mobile-orbit{
    display:block;
    position:absolute;
    z-index:1;
    left:50%;
    bottom:10.5vh;
    width:150vw;
    height:30vh;
    transform:translateX(-50%);
    border-radius:50%;
    border-top:1px solid rgba(236,160,41,.28);
    box-shadow:
      0 -1px 12px rgba(255,183,53,.10),
      inset 0 9px 35px rgba(156,86,8,.04);
    opacity:.80;
  }

  .horizon-wrap{
    width:128vw;
    bottom:12.3svh;
    height:92px;
  }

  .domain{
    bottom:max(3.6svh,env(safe-area-inset-bottom));
    font-size:13px;
  }

  .particles{opacity:.82}
  .film-grain{opacity:.055}
}

@media (max-width:430px){
  .hero{padding-top:max(5.5svh,env(safe-area-inset-top))}
  .logo-stage{width:min(66vw,250px)}
  .brand-lockup{width:min(80vw,340px)}
  .copy-block{margin-top:3.8svh}
  h1{font-size:clamp(41px,12.4vw,57px)}
  .subtitle{font-size:clamp(13px,3.75vw,16px)}
  .tagline{font-size:clamp(14px,4.25vw,18px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .intro{opacity:1!important;transform:none!important;filter:none!important}
  .intro-flare{display:none}
  .ray-field,.haze,.spotlight,.logo-aura,.floor-reflection{animation:none!important}
}