@font-face{font-family:Cormorant;src:url('./assets/cormorant-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Cormorant;src:url('./assets/cormorant-italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('./assets/manrope.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}

:root{color-scheme:dark;--ink:#06090c;--ivory:#ebe5d8;--gold:#c5a271;--muted:#969994;--line:rgba(203,173,127,.19);--page-gutter:clamp(24px,5.3vw,104px);font-family:Manrope,Arial,sans-serif;color:var(--ivory);background:var(--ink);font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-width:0}
body{background:var(--ink)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid #e6c693;outline-offset:7px}
button:disabled{cursor:default}
::selection{background:#b38c51;color:#06090c}
.universe{position:relative;min-height:780px;height:100svh;isolation:isolate;overflow:clip;background:radial-gradient(ellipse at 69% 45%,#112329 0%,#091217 29%,#06090c 66%)}
.atmosphere{position:absolute;inset:-12%;z-index:-4;opacity:.62;background:radial-gradient(ellipse at 66% 40%,rgba(40,88,91,.24),transparent 33%),radial-gradient(ellipse at 84% 69%,rgba(113,73,43,.1),transparent 29%),radial-gradient(ellipse at 28% 12%,rgba(32,50,67,.19),transparent 40%);transform:rotate(-16deg);animation:nebula-drift 35s ease-in-out infinite alternate}
#cosmos{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(4,7,10,.22),transparent 20%,transparent 78%,rgba(4,7,10,.58)),radial-gradient(ellipse at 60% 45%,transparent 40%,rgba(4,6,9,.27) 100%)}
.masthead{position:absolute;z-index:5;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;margin:0 var(--page-gutter);height:126px;border-bottom:1px solid var(--line);animation:reveal-down 1.5s .15s both}
.wordmark{display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:#d7c3a0;font-family:Cormorant,Georgia,serif;font-size:32px;line-height:1;letter-spacing:.01em}
.wordmark svg{width:33px;height:33px}.wordmark-dot{color:var(--gold)}
.header-note{font-size:12px;letter-spacing:.25em;color:#9c9b92}
.hero{position:absolute;inset:126px var(--page-gutter) 104px}
.hero-copy{position:absolute;z-index:3;top:26%;left:0;pointer-events:none;transition:opacity 1.1s,transform 1.5s cubic-bezier(.19,1,.22,1),filter 1.1s}
.eyebrow{display:flex;align-items:center;gap:17px;font-size:12px;letter-spacing:.42em;color:var(--gold);animation:reveal-up 1.6s .3s both}
.fine-line{height:1px;width:35px;background:linear-gradient(90deg,#c5a27166,var(--gold))}
h1{margin:18px 0 17px;font-family:Cormorant,Georgia,serif;font-size:clamp(88px,8.8vw,166px);font-weight:400;line-height:1.03;letter-spacing:-.06em;animation:title-reveal 1.9s .25s both}
.title-dot{color:var(--gold)}
.hero-verse{margin:0;color:#c2c1b7;font-family:Cormorant,Georgia,serif;font-size:clamp(24px,2.1vw,38px);line-height:1.32;letter-spacing:.006em;animation:reveal-up 1.6s .6s both}
.hero-verse em{color:#d5b78b}
.intro-detail{margin-top:37px;display:flex;gap:14px;align-items:center;animation:reveal-up 1.6s .8s both}
.intro-detail>span{font-size:21px;color:#a58862}
.intro-detail p{font-size:12px;line-height:1.85;letter-spacing:.045em;margin:0;color:#858e90}
.deity{position:absolute;z-index:1;left:73%;top:50%;width:min(60vw,calc(100svh - 210px),940px);aspect-ratio:1;margin:0;transform:translate(-50%,-49%);transition:left 1.8s cubic-bezier(.19,1,.22,1),transform 1.8s cubic-bezier(.19,1,.22,1),width 1.8s cubic-bezier(.19,1,.22,1);animation:deity-reveal 2.8s .1s both}
.deity-parallax{width:100%;height:100%;transform:translate3d(var(--deity-x,0px),var(--deity-y,0px),0);will-change:transform}
.deity-image{display:block;position:relative;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 18px #ca9d4620);animation:levitate 11s ease-in-out infinite}
.deity-halo{position:absolute;inset:10% 11% 13%;border-radius:50%;background:radial-gradient(ellipse,transparent 35%,#b2863821 55%,#ae905d08 68%,transparent 73%);filter:blur(18px);animation:halo-breathe 8s ease-in-out infinite}
.orbital{position:absolute;pointer-events:none;border:1px solid rgba(172,146,105,.105);border-radius:50%;inset:7%;transform:rotate(-27deg) scaleY(.78);box-shadow:0 0 45px #a4771707}
.orbital:before,.orbital:after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:#cbaa73;box-shadow:0 0 15px 2px #cbaa7344}
.orbital:before{left:17%;top:11%}.orbital:after{right:17%;bottom:11%;width:2px;height:2px}
.orbital-two{inset:1%;opacity:.55;transform:rotate(36deg) scaleY(.87)}
figcaption{position:absolute;right:0;bottom:6%;display:flex;align-items:flex-start;gap:12px;color:#b49b75;font-size:12px;letter-spacing:.14em;line-height:1.7;transition:opacity 1s}
.caption-line{width:28px;height:1px;background:#b49b7570;margin-top:8px}
.caption-translation{display:block;font-family:Cormorant,Georgia,serif;font-size:17px;letter-spacing:.02em;color:#989b94;font-style:italic}
.experience-button{position:absolute;z-index:5;left:0;top:calc(26% + clamp(88px,8.8vw,166px) + clamp(64px,5.544vw,100px) + 173px);display:flex;align-items:center;gap:13px;background:transparent;border:0;padding:0;font-size:14px;letter-spacing:.04em;color:#d8c6a6;transition:color .3s,transform .5s;animation:reveal-up 1.6s 1s both}
.experience-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid #b69a684d;border-radius:50%;transition:background .4s,border-color .4s,box-shadow .4s;position:relative}
.experience-icon:after{content:'';position:absolute;inset:-5px;border:1px solid #b69a6812;border-radius:50%}
.experience-icon svg{width:23px;height:23px;transition:transform 1s}
.experience-button:hover{color:#f8e0b6}.experience-button:hover .experience-icon{border-color:#c5a271a0;background:#c5a27112;box-shadow:0 0 26px #c5a27119}.experience-button:hover svg{transform:rotate(90deg)}
.immersive-mantra{position:absolute;z-index:3;bottom:0;left:50%;margin:0;transform:translate(-50%,10px);opacity:0;color:#c8b48f;font-size:16px;transition:opacity 1s,transform 1s;pointer-events:none;white-space:nowrap}
.footer{position:absolute;z-index:5;bottom:0;left:var(--page-gutter);right:var(--page-gutter);height:104px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);animation:reveal-up 1.6s .7s both}
.place{display:flex;align-items:center;gap:12px;color:#929892;font-size:12px;letter-spacing:.12em}
.location-mark{font-size:24px;font-family:Georgia,serif;color:#ac9571}.place-divider{color:#645e51;margin:0 10px}
.region{white-space:nowrap}
.tamil-signature{position:absolute;left:50%;transform:translateX(-50%);font-size:13px;color:#bca982;opacity:.8;transition:opacity .8s}
.motion-button{display:flex;align-items:center;gap:12px;padding:14px 0 14px 14px;min-height:44px;background:transparent;border:0;font-size:14px;letter-spacing:.02em;color:#9fa497;transition:color .3s}.motion-button:hover{color:#eddbb9}
.motion-bars{display:flex;align-items:center;gap:3px;height:16px}.motion-bars i{display:block;width:1px;background:#b49b75;height:8px;animation:wave 1.6s ease-in-out infinite alternate}.motion-bars i:nth-child(2){height:15px;animation-delay:-.8s}.motion-bars i:nth-child(3){height:11px;animation-delay:-.4s}.motion-bars i:nth-child(4){height:5px;animation-delay:-1.2s}
.frame-corner{position:absolute;width:8px;height:8px;border-color:#c4a37077;border-style:solid;z-index:5;pointer-events:none}.corner-top-left{top:122px;left:calc(var(--page-gutter) - 4px);border-width:1px 0 0 1px}.corner-bottom-right{bottom:100px;right:calc(var(--page-gutter) - 4px);border-width:0 1px 1px 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.is-immersive .hero-copy{opacity:0;transform:translateX(-45px);filter:blur(8px)}
.is-immersive .deity{left:50%;transform:translate(-50%,-52%);width:min(73vw,calc(100svh - 205px),1000px)}
.is-immersive figcaption{opacity:0}.is-immersive .immersive-mantra{opacity:1;transform:translate(-50%,0)}.is-immersive .tamil-signature{opacity:0}
.is-immersive .experience-button{transform:translateY(10px)}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}
.motion-paused *{transition:none!important}
.intro-complete .masthead,.intro-complete .eyebrow,.intro-complete h1,.intro-complete .hero-verse,.intro-complete .intro-detail,.intro-complete .experience-button,.intro-complete .footer,.intro-complete .deity{animation:none}
.motion-paused .motion-bars i{height:2px}
.motion-paused .deity-parallax{transform:none}
.motion-paused .hero-copy,.motion-paused .deity,.motion-paused .immersive-mantra,.motion-paused .experience-button{transition:none}
.motion-paused .masthead,.motion-paused .eyebrow,.motion-paused h1,.motion-paused .hero-verse,.motion-paused .intro-detail,.motion-paused .experience-button,.motion-paused .footer,.motion-paused .deity{animation:none}

@keyframes reveal-up{from{opacity:0;translate:0 17px}to{opacity:1;translate:0 0}}
@keyframes reveal-down{from{opacity:0;translate:0 -9px}to{opacity:1;translate:0 0}}
@keyframes title-reveal{from{opacity:0;filter:blur(9px);translate:0 22px}to{opacity:1;filter:blur(0);translate:0 0}}
@keyframes deity-reveal{from{opacity:0;filter:blur(13px)}to{opacity:1;filter:blur(0)}}
@keyframes levitate{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes halo-breathe{0%,100%{opacity:.55;scale:.97}50%{opacity:1;scale:1.04}}
@keyframes nebula-drift{from{translate:-1% -1%;scale:1}to{translate:2% 2%;scale:1.07}}
@keyframes wave{from{scale:1 .5}to{scale:1 1}}

@media(min-width:1600px){.hero-copy{top:27%}.experience-button{top:calc(27% + 166px + 100px + 173px)}}
@media(max-height:850px) and (min-width:901px){.universe{min-height:680px}.masthead{height:99px}.hero{inset:99px var(--page-gutter) 84px}.footer{height:84px}.corner-top-left{top:95px}.corner-bottom-right{bottom:80px}.hero-copy{top:18%}.experience-button{top:auto;bottom:8%}.intro-detail{margin-top:24px}.deity{width:min(60vw,calc(100svh - 165px))}h1{font-size:clamp(85px,8.8vw,142px)}}
@media(max-width:1100px) and (min-width:901px){.deity{left:74%;width:min(60vw,calc(100svh - 210px))}.hero-copy{top:24%}.hero-verse{font-size:28px}h1{font-size:86px}.intro-detail{margin-top:27px}.experience-button{top:auto;bottom:9%}.tamil-signature{font-size:12px}}
@media(max-width:1100px){figcaption{display:none}}
@media(max-width:900px){
  :root{--page-gutter:27px}
  .universe{display:flex;flex-direction:column;height:auto;min-height:100svh;background:radial-gradient(ellipse at 50% 46%,#122429,#081015 36%,#06090c 76%)}
  .masthead{position:relative;inset:auto;flex-shrink:0;height:88px}.wordmark{font-size:28px;gap:9px}.wordmark svg{width:28px;height:28px}.header-note{font-size:12px;letter-spacing:.07em}
  .hero{position:relative;inset:auto;flex:1;display:flex;flex-direction:column;align-items:center;padding:24px 0 26px;min-height:0}
  .hero-copy{position:relative;top:auto;width:100%;text-align:center;left:auto;padding:0 12px}
  .eyebrow{justify-content:center;font-size:12px;letter-spacing:.3em;gap:11px}.fine-line{width:22px}.eyebrow:after{content:'';width:22px;height:1px;background:linear-gradient(90deg,var(--gold),#c5a27166)}
  h1{font-size:clamp(66px,15vw,96px);letter-spacing:-.045em;margin:10px 0 8px}
  .hero-verse{font-size:23px;line-height:1.25}.hero-verse br{display:none}.hero-verse br:after{content:' '}.hero-verse em{display:block}.intro-detail{display:none}
  .deity{position:relative;left:auto;top:auto;width:min(99vw,590px);transform:none;flex-shrink:0;margin:14px 0 0}
  .orbital{inset:10%}.orbital-two{inset:5%}figcaption{bottom:6%;right:7%;font-size:12px;gap:8px}.caption-line{width:15px}.caption-translation{font-size:15px}
  .experience-button{position:relative;left:auto;top:auto;bottom:auto;transform:none;white-space:nowrap;font-size:14px;gap:11px;margin-top:15px;min-height:44px}.experience-icon{width:36px;height:36px}
  .footer{position:relative;left:auto;right:auto;bottom:auto;margin:0 var(--page-gutter);height:86px;min-height:86px;align-items:center}.place{font-size:12px;letter-spacing:.03em;gap:7px;max-width:180px;line-height:1.8}.place-divider{margin:0 4px}.location-mark{font-size:19px}.tamil-signature{display:none}.motion-button{font-size:14px;gap:8px;white-space:nowrap}.motion-bars{gap:2px}
  .corner-top-left{top:84px}.corner-bottom-right{bottom:82px}
  .is-immersive .hero-copy{transform:translateY(-18px)}.is-immersive .deity{width:min(99vw,590px);left:auto;top:auto;transform:translateY(-80px) scale(1.03)}
  .is-immersive .experience-button{transform:none}.immersive-mantra{bottom:122px;font-size:14px}
}
@media(max-width:380px){:root{--page-gutter:20px}.header-note{max-width:104px;text-align:right;line-height:1.6}.place{max-width:155px}.hero-verse{font-size:21px}.motion-button{padding-left:8px}.caption-line{display:none}figcaption{right:5%;font-size:12px;letter-spacing:.06em}}
@media(min-width:901px) and (max-height:600px){.universe{min-height:700px}.deity{width:520px}.is-immersive .deity{width:540px}.hero-copy{top:18%}.experience-button{bottom:6%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.deity-parallax{transform:none!important}}

/* The entrance is a luminous threshold, with one clear primary action. */
.hero-copy{top:20%}
.experience-button{top:auto;bottom:7%;min-width:355px;min-height:94px;padding:17px 23px;gap:19px;border:1px solid #e3be789c;border-radius:2px;background:linear-gradient(110deg,#78502a50,#29271a95 48%,#4a391f70);box-shadow:0 0 45px #c1933e16,inset 0 1px #ffe5aa22;isolation:isolate;overflow:hidden;transition:transform .5s,box-shadow .5s,border-color .5s,opacity .6s}
.experience-button:before{content:'';position:absolute;z-index:-1;inset:-100% -60%;background:linear-gradient(110deg,transparent 43%,#eec88621 49%,transparent 56%);animation:threshold-sheen 6s ease-in-out infinite;pointer-events:none}
.experience-content{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.experience-content small{font:8px/1.5 Manrope,sans-serif;letter-spacing:.22em;color:#bea376}.experience-content #experience-label{font:27px/1 Cormorant,Georgia,serif;letter-spacing:.01em;color:#f1d7a8;white-space:nowrap}
.experience-button .experience-icon{flex-shrink:0;width:48px;height:48px;border-color:#dbb57980;background:#cda15512;box-shadow:0 0 25px #dcb66c20}.experience-button .experience-icon svg{width:29px;height:29px;animation:threshold-star 24s linear infinite}.experience-arrow{font:27px/1 Cormorant,serif;color:#d8b37b;margin-left:4px;transition:translate .5s}.experience-button:hover{transform:translateY(-4px);border-color:#ffe1a5;box-shadow:0 0 65px #c1933e2e,inset 0 1px #ffe5aa44}.experience-button:hover .experience-arrow{translate:3px -3px}
.entering-cosmos .hero-copy{opacity:0;transform:translateY(-20px)}.entering-cosmos .experience-button{opacity:0;transform:translateY(-8px) scale(1.1);transition-duration:.65s}.entering-cosmos .deity{opacity:0;transform:translate(-50%,-49%) scale(1.2);transition:opacity .7s,transform .9s}.entering-cosmos .masthead,.entering-cosmos .footer{opacity:0;transition:opacity .65s}
@keyframes threshold-sheen{0%,35%{transform:translateX(-38%)}75%,100%{transform:translateX(38%)}}
.entering-cosmos .hero{opacity:0;transition:opacity .65s;pointer-events:none}
.entry-pending #experience-status{position:fixed;top:50%;left:50%;width:auto;height:auto;max-width:80vw;margin:0;padding:0;overflow:visible;clip:auto;white-space:normal;transform:translate(-50%,-50%);text-align:center;font:24px/1.5 Cormorant,Georgia,serif;letter-spacing:.03em;color:#d8c09a;z-index:10}
@keyframes threshold-star{to{rotate:360deg}}
@media(max-width:900px){.hero-copy{top:auto}.experience-button{bottom:auto;min-width:0;width:min(calc(100% - 48px),380px);min-height:86px;margin-top:6px;padding:15px 19px;gap:15px;justify-content:center}.experience-content #experience-label{font-size:27px}.experience-content small{font-size:7px;letter-spacing:.17em}.experience-button .experience-icon{width:44px;height:44px}.experience-arrow{margin-left:0}.deity{width:min(87vw,520px);margin-top:8px}.entering-cosmos .deity{transform:scale(1.13);opacity:0}}
@media(max-width:380px){.experience-button{width:calc(100% - 36px);padding:14px;gap:12px}.experience-content #experience-label{font-size:24px}.experience-content small{font-size:6px}.experience-arrow{font-size:24px}.experience-button .experience-icon{width:38px;height:38px}}

/* Copy and entrance share a flow, so the larger control always follows text. */
.hero-story{position:absolute;inset:0 auto 0 0;width:46%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:32px;z-index:3}
.hero-story .hero-copy{position:relative;inset:auto;width:100%}
.hero-story .experience-button{position:relative;inset:auto;flex-shrink:0;min-width:0;width:min(100%,370px);margin:0}
@media(min-width:901px) and (max-height:850px){.hero-story{gap:26px}.hero-story .intro-detail{margin-top:24px}}
@media(max-width:900px){.hero-story{display:contents}.hero-story .hero-copy{order:0}.hero>.deity{order:1}.hero-story .experience-button{order:2;width:min(calc(100% - 48px),380px);margin-top:14px}.hero>.immersive-mantra{order:3}}
@media(max-width:380px){.hero-story .experience-button{width:calc(100% - 36px)}}
