.hero{position:relative;height:100svh;overflow:hidden;background:#140c08}
.hero-bg{position:absolute;inset:0;overflow:hidden;transform:scale(1.14);transition:transform 2.6s var(--ease) .3s}
body.revealed .hero-bg{transform:scale(1)}
.hero-media{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media video{opacity:0;transition:opacity 1.2s ease}
.hero-media video.on{opacity:1}
.hero-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 48% at 50% 58%,rgba(22,12,8,.28),transparent 70%),
    linear-gradient(180deg,rgba(14,8,6,.28) 0%,rgba(14,8,6,0) 28%,rgba(14,8,6,0) 55%,rgba(22,12,8,.58) 100%);
}
.hero-content{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;color:#fff8ef;padding:0 6vw;
}
.hero-title{
  position:relative;
  font-size:clamp(2.7rem,8.2vw,6.4rem);
  font-weight:700;line-height:1.18;margin:.15em 0 .28em;
}

.t-fill span{
  display:inline-block;opacity:0;transform:translateY(48px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
  background:linear-gradient(112deg,#fffaf0 0%,#f8e7c3 28%,#ddb87f 52%,#f4d9a9 74%,#fff7e2 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:sheen 6.5s ease-in-out infinite;
  animation-delay:var(--d,0s);
}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
body.revealed .t-fill span{opacity:1;transform:none}

.t-sh{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:0 2px 6px rgba(30,16,8,.55),0 12px 44px rgba(20,10,6,.45);
  opacity:0;transition:opacity 1.4s ease 1.6s;
  -webkit-mask-image:radial-gradient(circle 130px at var(--mx,-999px) var(--my,-999px),transparent 0%,rgba(0,0,0,.05) 25%,rgba(0,0,0,.22) 50%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.8) 85%,#000 100%);
  mask-image:radial-gradient(circle 130px at var(--mx,-999px) var(--my,-999px),transparent 0%,rgba(0,0,0,.05) 25%,rgba(0,0,0,.22) 50%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.8) 85%,#000 100%);
}
body.revealed .t-sh{opacity:1}

.t-fill{
  display:block;position:relative;z-index:1;
  -webkit-mask-image:radial-gradient(circle 130px at var(--mx,-999px) var(--my,-999px),transparent 0%,transparent 72%,#000 100%);
  mask-image:radial-gradient(circle 130px at var(--mx,-999px) var(--my,-999px),transparent 0%,transparent 72%,#000 100%);
}
.hero-echo{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:none;transform:none;
  color:rgba(255,243,222,.16);-webkit-text-fill-color:rgba(255,243,222,.16);
  -webkit-text-stroke:2.5px #e9cd97;
  -webkit-mask-image:radial-gradient(circle 130px at var(--mx,-999px) var(--my,-999px),#000 0%,#000 72%,transparent 100%);
  mask-image:radial-gradient(circle 130px at var(--mx,-999px) var(--my,-999px),#000 0%,#000 72%,transparent 100%);
}
.hero-title::after{
  content:'';position:absolute;left:50%;bottom:-.14em;width:0;height:1px;
  transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--champagne),transparent);
  transition:width .8s var(--ease);
}
.hero-title:hover::after{width:72%}

.hero-sub{
  font-family:var(--sans);
  font-size:clamp(.98rem,1.5vw,1.15rem);color:#fdf0e0;
  text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 24px rgba(0,0,0,.35);
  opacity:0;transform:translateY(16px);transition:opacity 1.2s ease 1.9s,transform 1.2s ease 1.9s;
  max-width:22em;line-height:1.85;
}
body.revealed .hero-sub{opacity:1;transform:none}

.scroll-hint{
  position:absolute;bottom:5.5vh;left:50%;transform:translateX(-50%);
  z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(255,248,239,.55);font-size:.75rem;
  opacity:0;transition:opacity 1.2s ease 2.5s;
  font-family:var(--sans);
  pointer-events:none;
}
body.revealed .scroll-hint{opacity:1}
body.instant .t-fill span,
body.instant .t-sh,
body.instant .hero-sub,
body.instant .scroll-hint,
body.instant .nav{
  transition-delay:0s !important;
  animation-delay:0s !important;
}
.scroll-hint .line{width:1px;height:36px;background:rgba(255,248,239,.35);overflow:hidden;position:relative}
.scroll-hint .line::after{
  content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:#f4d9a9;animation:drip 2.1s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes drip{0%{top:-100%}60%,100%{top:100%}}