*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#030403}
body{color:#f4ead8;font-family:Vazirmatn,Arial,sans-serif;overflow-x:hidden}
#ocean{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.light-sweep{position:fixed;inset:-30%;z-index:1;pointer-events:none;background:conic-gradient(from 205deg at 52% 48%,transparent 0deg,rgba(218,170,86,.035) 35deg,rgba(255,235,188,.07) 48deg,transparent 65deg,transparent 360deg);filter:blur(22px);animation:sweep 13s ease-in-out infinite}
.mist{position:fixed;inset:-20%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 23%,rgba(224,178,93,.10),transparent 21%),radial-gradient(ellipse at 75% 77%,rgba(67,112,118,.13),transparent 27%);filter:blur(55px);animation:mist 16s ease-in-out infinite alternate}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 37%,transparent 17%,rgba(0,0,0,.22) 48%,rgba(0,0,0,.78) 100%)}
.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.page{position:relative;z-index:4;min-height:100vh;display:flex;justify-content:center}
.content{width:min(950px,100%);min-height:100vh;padding:38px 24px 32px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.eyebrow{direction:ltr;display:flex;align-items:center;gap:13px;color:#a18d70;font:12px "Cormorant Garamond",serif;letter-spacing:.46em}
.eyebrow span{width:30px;height:1px;background:#d1a052;opacity:.65}
.logo{width:min(255px,43vw);height:auto;margin:-7px 0 -3px;filter:drop-shadow(0 0 30px rgba(218,170,82,.18))}
h1{direction:ltr;margin:0;color:#d9aa5d;font:400 clamp(53px,7.2vw,90px)/.9 "Cormorant Garamond",serif;letter-spacing:.065em;text-shadow:0 0 35px rgba(217,170,93,.13)}
h1 span{letter-spacing:0}
.gold-line{width:78px;height:1px;margin:25px 0 17px;background:linear-gradient(90deg,transparent,#e0b365,transparent);box-shadow:0 0 12px rgba(218,170,82,.28)}
.lead{margin:0;color:#e9decb;font-size:clamp(14px,2vw,18px);font-weight:300;line-height:2}
.countdown{direction:ltr;display:flex;align-items:center;gap:29px;margin:44px 0 46px}
.countdown div{min-width:80px;display:flex;flex-direction:column}
.countdown b{color:#ddb064;font:400 41px/1 "Cormorant Garamond",serif;text-shadow:0 0 18px rgba(221,176,100,.16)}
.countdown small{color:#8b7b65;font:10px/2 "Cormorant Garamond",serif;letter-spacing:.32em}
.countdown i{width:1px;height:46px;background:linear-gradient(transparent,rgba(221,176,100,.6),transparent)}
.info{width:100%;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(221,176,100,.2);border-bottom:1px solid rgba(221,176,100,.2);background:rgba(0,0,0,.17);backdrop-filter:blur(13px)}
.info a{color:#eee2cf;text-decoration:none;padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:5px;transition:.4s}
.info a+a{border-right:1px solid rgba(221,176,100,.18)}
.info a:hover{background:rgba(221,176,100,.065);transform:translateY(-3px)}
.ico{font:31px/1 serif;color:#ddb064}
.info em{font-style:normal;color:#ddb064;font-size:11px}
.info strong{font-size:13px;font-weight:300}
.brand{margin-top:auto;padding-top:39px;display:flex;flex-direction:column;gap:7px;direction:ltr;color:#a38d68}
.waves{font:23px serif;letter-spacing:-.2em;color:#ddb064}
.brand b{font:11px "Cormorant Garamond",serif;letter-spacing:.36em;font-weight:400}
.hint{position:fixed;z-index:5;bottom:15px;left:50%;transform:translateX(-50%);direction:ltr;white-space:nowrap;color:#706758;font:9px "Cormorant Garamond",serif;letter-spacing:.3em}
.hint span{color:#ddb064;margin:0 7px}
@keyframes sweep{0%,100%{transform:translateX(-5%) rotate(-2deg);opacity:.65}50%{transform:translateX(6%) rotate(3deg);opacity:1}}
@keyframes mist{to{transform:translate(5vw,4vh) scale(1.1)}}
@media(max-width:650px){
.content{padding:26px 15px 54px}.eyebrow{font-size:10px;letter-spacing:.34em}.logo{width:205px}
h1{font-size:50px}.gold-line{margin:20px 0 14px}.lead{font-size:14px}
.countdown{gap:8px;margin:36px 0 37px}.countdown div{min-width:62px}.countdown b{font-size:31px}.countdown small{font-size:8px;letter-spacing:.16em}.countdown i{height:36px}
.info{grid-template-columns:1fr}.info a{padding:15px}.info a+a{border-right:0;border-top:1px solid rgba(221,176,100,.18)}
.brand{padding-top:29px}.hint{display:none}
}
@media(prefers-reduced-motion:reduce){#ocean,.light-sweep,.mist{display:none}.content{transition:none}}


/* --- Luxury polish v2 --- */
:root{
  --gold-soft: rgba(226,190,105,.82);
  --gold-faint: rgba(226,190,105,.12);
  --glass: rgba(7,10,12,.34);
}
body{background:#05080a;overflow-x:hidden}
.hero{
  position:relative;
  z-index:4;
  isolation:isolate;
}
.hero:before{
  content:"";
  position:absolute;
  inset:-15%;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 34%, rgba(221,188,111,.10), transparent 22%),
    radial-gradient(circle at 50% 75%, rgba(255,255,255,.035), transparent 30%);
  filter:blur(16px);
  pointer-events:none;
}
.logo{
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(224,190,105,.08));
  transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease;
}
.logo:hover{
  transform:translateY(-4px) scale(1.025);
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(224,190,105,.18));
}
.title{
  letter-spacing:.16em;
  text-shadow:0 5px 28px rgba(0,0,0,.55);
}
.subtitle{
  max-width:680px;
  text-wrap:balance;
  text-shadow:0 3px 18px rgba(0,0,0,.55);
}
.countdown{
  position:relative;
  padding:18px 18px 14px;
  border:1px solid rgba(226,190,105,.16);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(10,13,15,.48),rgba(5,8,10,.26));
  box-shadow:0 18px 55px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(14px);
}
.countdown:after{
  content:"";
  position:absolute;
  left:10%;right:10%;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
  opacity:.55;
}
.countdown .unit{
  transition:transform .35s ease;
}
.countdown .unit:hover{transform:translateY(-3px)}
.info-grid{
  gap:14px;
}
.info-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(135deg,rgba(13,17,19,.52),rgba(4,7,9,.32));
  box-shadow:0 16px 45px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(13px);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s ease,background .45s ease;
}
.info-card:before{
  content:"";
  position:absolute;
  top:0;left:-30%;width:28%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(226,190,105,.10),transparent);
  transform:skewX(-18deg);
  transition:left .8s ease;
}
.info-card:hover{
  transform:translateY(-6px);
  border-color:rgba(226,190,105,.22);
  background:linear-gradient(135deg,rgba(18,22,24,.62),rgba(5,8,10,.40));
}
.info-card:hover:before{left:115%}
.info-card a{
  text-decoration:none;
}
.footer{
  opacity:.72;
  letter-spacing:.24em;
}
@media (max-width:700px){
  .countdown{padding:14px 10px 11px;border-radius:18px}
  .info-card:hover{transform:translateY(-3px)}
}


/* --- Signature interaction layer --- */
body:before{content:"";position:fixed;z-index:3;pointer-events:none;left:var(--cx,50%);top:var(--cy,50%);width:220px;height:220px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(225,188,111,.07),transparent 62%);filter:blur(18px);transition:left .18s ease-out,top .18s ease-out}
.logo{transition:transform .75s cubic-bezier(.16,1,.3,1),filter .75s ease}
.logo:hover{transform:translateY(-7px) scale(1.035) rotate(-.6deg);filter:drop-shadow(0 16px 35px rgba(0,0,0,.55)) drop-shadow(0 0 38px rgba(224,190,105,.24))}
.info{overflow:hidden;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.025)}
.info a{position:relative;overflow:hidden;isolation:isolate}
.info a:before{content:"";position:absolute;inset:-80%;z-index:-1;background:conic-gradient(from 0deg,transparent 0 25%,rgba(226,190,105,.16) 31%,transparent 39% 100%);opacity:0;transform:rotate(0deg);transition:opacity .45s ease,transform 1.1s ease}
.info a:after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;background:linear-gradient(90deg,transparent,#e7c47e,transparent);transform:translateX(-50%);box-shadow:0 0 18px rgba(231,196,126,.4);transition:width .55s cubic-bezier(.2,.8,.2,1)}
.info a:hover{background:radial-gradient(circle at 50% 100%,rgba(221,176,100,.11),transparent 65%);transform:translateY(-6px)}
.info a:hover:before{opacity:1;transform:rotate(35deg)}
.info a:hover:after{width:72%}
.info a:hover .ico{transform:translateY(-4px) scale(1.08) rotate(-4deg);text-shadow:0 0 22px rgba(221,176,100,.5)}
.info a:hover strong{color:#fff6e7;transform:translateY(-1px)}
.ico,strong{transition:transform .45s cubic-bezier(.2,.8,.2,1),color .4s ease,text-shadow .4s ease}
.countdown div{position:relative;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.countdown div:hover{transform:translateY(-5px)}
.countdown div:hover b{text-shadow:0 0 30px rgba(221,176,100,.34)}
.brand b{transition:letter-spacing .7s ease,color .5s ease}
.brand:hover b{letter-spacing:.46em;color:#ddbd7c}
.gold-line{position:relative}
.gold-line:before{content:"";position:absolute;inset:-8px -25px;background:radial-gradient(ellipse,rgba(224,180,95,.13),transparent 68%);filter:blur(7px);animation:pulseLine 3.6s ease-in-out infinite}
@keyframes pulseLine{50%{opacity:.35;transform:scaleX(.65)}100%{opacity:1;transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){body:before,.gold-line:before{display:none}.info a:hover{transform:none}}


/* ===== FINAL STABILITY + CINEMATIC TITLE ===== */
html, body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}
body {
  position: relative;
}
.hero, .content, main, .page, .container {
  transform: none !important;
  will-change: auto !important;
}
.logo, .title, .subtitle, .countdown, .info-grid, .footer {
  transform: none !important;
}

/* The main title stays razor-sharp; only its light is animated. */
.title {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: #f2dfad;
  background: linear-gradient(
    110deg,
    #c8a35c 0%,
    #fff3c4 22%,
    #e6c778 38%,
    #fff9df 50%,
    #c69c4d 67%,
    #f4dfaa 82%,
    #b8893e 100%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 8px 26px rgba(0,0,0,.45));
  animation: goldFlow 5.5s ease-in-out infinite;
}

.title::before {
  content: "";
  position: absolute;
  inset: -35% -12%;
  z-index: -1;
  background:
    radial-gradient(ellipse at center,
      rgba(244,218,153,.24) 0%,
      rgba(226,190,105,.11) 30%,
      transparent 68%);
  filter: blur(20px);
  opacity: .65;
  animation: titleGlow 3.6s ease-in-out infinite;
  pointer-events: none;
}

.title::after {
  content: "";
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -25%;
  width: 14%;
  transform: skewX(-20deg);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0) 20%,
    rgba(255,250,224,.98) 50%,
    rgba(232,201,124,.45) 70%,
    transparent 100%
  );
  filter: blur(.6px);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: titleSweep 4.8s cubic-bezier(.16,.72,.18,1) infinite;
}

@keyframes goldFlow {
  0%, 100% {
    background-position: 100% 50%;
    filter: drop-shadow(0 8px 26px rgba(0,0,0,.45))
            drop-shadow(0 0 8px rgba(226,190,105,.08));
  }
  50% {
    background-position: 0% 50%;
    filter: drop-shadow(0 8px 26px rgba(0,0,0,.45))
            drop-shadow(0 0 20px rgba(226,190,105,.22));
  }
}

@keyframes titleGlow {
  0%, 100% { opacity: .42; transform: scale(.96); }
  50% { opacity: .9; transform: scale(1.045); }
}

@keyframes titleSweep {
  0%, 42% { left: -25%; opacity: 0; }
  48% { opacity: .1; }
  55% { opacity: .95; }
  64% { left: 118%; opacity: .08; }
  100% { left: 118%; opacity: 0; }
}

/* Subtle golden breathing line under the title if the title has a decorative border. */
.title-wrap::after, .heading-wrap::after {
  content: "";
  display: block;
  width: min(180px, 42vw);
  height: 1px;
  margin: 15px auto 0;
  background: linear-gradient(90deg, transparent, rgba(226,190,105,.75), transparent);
  box-shadow: 0 0 14px rgba(226,190,105,.22);
  transform-origin: center;
  animation: lineBreath 3.4s ease-in-out infinite;
  opacity: .65;
}
@keyframes lineBreath {
  0%,100% { transform: scaleX(.65); opacity:.35; }
  50% { transform: scaleX(1); opacity:.85; }
}

/* Keep links/card motion local — never move their parent viewport. */
.info-card, .countdown .unit {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#ocean {
  transform: translate3d(var(--pointer-x, 0px), var(--pointer-y, 0px), 0) scale(1.025) !important;
  width: calc(100% + 18px);
  height: calc(100% + 12px);
  left: -9px;
  top: -6px;
  will-change: transform;
}
.light-sweep, .mist {
  transform: translate3d(calc(var(--pointer-x, 0px) * .35), calc(var(--pointer-y, 0px) * .25), 0);
  will-change: transform;
}

/* ===== CINEMATIC LIVE COMING SOON ===== */
.title {
  position: relative !important;
  display: inline-block !important;
  color: #f3d991 !important;
  -webkit-text-fill-color: #f3d991 !important;
  background: none !important;
  filter: drop-shadow(0 0 7px rgba(238,204,120,.25))
          drop-shadow(0 8px 28px rgba(0,0,0,.48)) !important;
  animation: titlePulse 2.8s ease-in-out infinite !important;
  overflow: visible !important;
}

.title::before {
  content: "Coming Soon..." !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 38%,
    rgba(255,255,255,.95) 47%,
    rgba(255,238,178,1) 50%,
    rgba(255,255,255,.95) 53%,
    transparent 62%,
    transparent 100%
  ) !important;
  background-size: 220% 100% !important;
  background-position: 180% 0 !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 9px rgba(255,229,155,.65)) !important;
  pointer-events: none !important;
  animation: titleShimmer 2.6s cubic-bezier(.2,.75,.2,1) infinite !important;
}

.title::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  left: -7% !important;
  right: -7% !important;
  top: 50% !important;
  height: 110% !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  background: radial-gradient(
    ellipse at center,
    rgba(235,201,125,.20) 0%,
    rgba(235,201,125,.07) 36%,
    transparent 72%
  ) !important;
  filter: blur(16px) !important;
  opacity: .75 !important;
  pointer-events: none !important;
  animation: titleHalo 2.8s ease-in-out infinite !important;
}

@keyframes titleShimmer {
  0%   { background-position: 180% 0; opacity: 0; }
  12%  { opacity: .25; }
  25%  { opacity: 1; }
  43%  { background-position: -40% 0; opacity: .95; }
  55%,100% { background-position: -40% 0; opacity: 0; }
}

@keyframes titlePulse {
  0%,100% {
    filter: drop-shadow(0 0 6px rgba(238,204,120,.20))
            drop-shadow(0 8px 28px rgba(0,0,0,.48));
  }
  50% {
    filter: drop-shadow(0 0 13px rgba(238,204,120,.55))
            drop-shadow(0 0 30px rgba(238,204,120,.14))
            drop-shadow(0 8px 28px rgba(0,0,0,.48));
  }
}

@keyframes titleHalo {
  0%,100% { opacity:.42; transform:translateY(-50%) scale(.92); }
  50% { opacity:.95; transform:translateY(-50%) scale(1.08); }
}

/* ===== MORE CINEMATIC WATER / LIGHT ===== */
#ocean {
  transform: translate3d(var(--pointer-x,0px),var(--pointer-y,0px),0) scale(1.035) !important;
}

.light-sweep {
  opacity: .9 !important;
  filter: blur(2px);
  animation: cinematicLight 8s ease-in-out infinite !important;
}

@keyframes cinematicLight {
  0%,100% { transform: translate3d(-5%,0,0) scale(1); opacity:.35; }
  50% { transform: translate3d(5%,2%,0) scale(1.08); opacity:.85; }
}

/* Animated reflected gold streaks over the water */
body::after {
  content: "";
  position: fixed;
  z-index: 2;
  left: 12%;
  right: 12%;
  bottom: 8%;
  height: 28%;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      174deg,
      transparent 0 13px,
      rgba(231,199,126,.07) 14px 16px,
      transparent 17px 28px
    );
  mask-image: linear-gradient(to top, rgba(0,0,0,.85), transparent);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.85), transparent);
  filter: blur(1.4px);
  opacity: .65;
  transform-origin: center bottom;
  animation: waterReflection 5.5s ease-in-out infinite;
}
@keyframes waterReflection {
  0%,100% { transform: perspective(500px) rotateX(48deg) scaleX(.82) translateX(-2%); opacity:.35; }
  50% { transform: perspective(500px) rotateX(48deg) scaleX(1.06) translateX(2%); opacity:.78; }
}

/* tiny floating atmosphere */
.mist {
  opacity: .55 !important;
}