*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#070707;color:#eee;font-family:Arial,"Noto Sans Tamil",sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 0,rgba(255,125,0,.08),transparent 35%);z-index:-1}.grain{position:fixed;inset:0;opacity:.04;pointer-events:none;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.loader{position:fixed;inset:0;background:#000;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;transition:.8s}.loader img{width:130px;animation:pulse 1.4s infinite}.loader span{letter-spacing:5px;font-size:12px;color:#d8a52a}.loader.hide{opacity:0;visibility:hidden}.topbar{height:82px;position:fixed;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;padding:0 5vw;background:linear-gradient(#050505e8,#05050566,transparent);gap:30px}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:800;margin-right:auto}.brand img{width:48px;height:48px;object-fit:contain}.brand span{font-size:15px}.topbar nav{display:flex;gap:25px}.topbar nav a{color:#ddd;text-decoration:none;font-size:13px;transition:.25s}.topbar nav a:hover{color:#f1bd43}.actions{display:flex;gap:8px}.actions select,.sound,.menuBtn{background:#121212;color:#eee;border:1px solid #3a3020;border-radius:20px;padding:8px 12px}.sound{cursor:pointer}.menuBtn{display:none;font-size:20px}.hero{min-height:100vh;display:grid;place-items:center;text-align:center;position:relative;padding:130px 20px 70px;overflow:hidden;background:radial-gradient(circle at 50% 42%,#301200 0,#100804 27%,#050505 65%)}.halo{position:absolute;width:560px;height:560px;border-radius:50%;border:1px solid #d8932233;box-shadow:0 0 120px #ff5a0018,inset 0 0 100px #ff8c0012;animation:spin 18s linear infinite}.halo:before,.halo:after{content:"";position:absolute;border:1px solid #d8932225;border-radius:50%;inset:40px}.halo:after{inset:90px}.heroLogo{width:min(410px,75vw);filter:drop-shadow(0 15px 40px #000);animation:float 5s ease-in-out infinite;z-index:1;opacity:.92}.heroText{z-index:2;margin-top:-25px}.eyebrow{color:#d8a52a;font-size:11px;letter-spacing:5px;font-weight:800}.hero h1{font-family:Georgia,serif;font-size:clamp(38px,7vw,86px);margin:8px 0;background:linear-gradient(90deg,#8d5a0b,#ffe08a,#c88718);-webkit-background-clip:text;color:transparent}.hero h2{font-size:clamp(20px,3vw,34px);margin:5px}.heroText>p:not(.eyebrow){max-width:700px;margin:15px auto;color:#bbb;line-height:1.8}.cta{display:flex;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap}.goldBtn,.ghostBtn{padding:14px 23px;text-decoration:none;border-radius:2px;font-size:13px;font-weight:700;letter-spacing:.4px}.goldBtn{background:linear-gradient(135deg,#8c5b0a,#f3c650,#9b6510);color:#090909}.ghostBtn{border:1px solid #5a4930;color:#eee}.scroll{position:absolute;bottom:22px;font-size:9px;letter-spacing:3px;color:#777}.section{padding:110px 8vw;max-width:1500px;margin:auto}.split{display:grid;grid-template-columns:1fr 1fr;gap:80px}.section h2{font-family:Georgia,serif;font-size:clamp(34px,5vw,64px);margin:10px 0;color:#f2d17d}.section p{line-height:1.9;color:#aaa}.dark{max-width:none;background:#0b0b0b}.dark>*{max-width:1300px;margin-left:auto;margin-right:auto}.sectionHead{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:45px}.sectionHead p{max-width:420px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:#101010;border:1px solid #222;padding:10px 10px 22px;transition:.4s}.card:hover{transform:translateY(-8px);border-color:#70541e}.poster{height:390px;display:flex;align-items:end;padding:25px;font:80px Georgia;color:#ffffff12;overflow:hidden;position:relative}.poster:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#000b)}.p1{background:radial-gradient(circle at 50% 30%,#7b2b0d,#150704 55%,#050505)}.p2{background:linear-gradient(145deg,#201500,#70470c 45%,#080808)}.p3{background:radial-gradient(circle,#592100,#090909 65%)}.card h3{margin:18px 10px 3px}.card p{margin:0 10px}.gallery{display:grid;grid-template-columns:2fr 1fr;gap:12px}.shot{min-height:260px;border:1px solid #272016;background:linear-gradient(135deg,#15100a,#080808);padding:25px;display:flex;flex-direction:column;justify-content:space-between;transition:.35s}.shot:nth-child(2),.shot:nth-child(3){background:radial-gradient(circle at top right,#3b1807,#080808 60%)}.shot:hover{transform:scale(.99);border-color:#9a6c1d}.shot b{font:70px Georgia;color:#d9a83c1f}.shot span{letter-spacing:4px;font-size:11px;color:#d9b55c}.contact{text-align:center}.contact img{width:150px}.contact h2{max-width:850px;margin:15px auto}.contact p{margin-bottom:35px}footer{border-top:1px solid #211c13;display:flex;justify-content:space-between;gap:20px;padding:30px 8vw;color:#777;font-size:12px}.reveal{opacity:0;transform:translateY(35px);transition:opacity .9s,transform .9s}.reveal.show{opacity:1;transform:none}@keyframes float{50%{transform:translateY(-12px)}}@keyframes pulse{50%{transform:scale(1.06);filter:drop-shadow(0 0 20px #f60)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:900px){.brand span{display:none}.menuBtn{display:block}.topbar nav{display:none;position:absolute;top:75px;left:5vw;right:5vw;flex-direction:column;background:#0b0b0bf5;border:1px solid #332919;padding:25px}.topbar nav.open{display:flex}.split,.cards,.gallery{grid-template-columns:1fr}.sectionHead{display:block}.poster{height:300px}.section{padding:80px 7vw}.heroLogo{width:min(340px,80vw)}footer{flex-direction:column;text-align:center}}
.youtube{text-align:center;background:radial-gradient(circle at 50% 20%,#35100b,#0a0a0a 58%);max-width:none;border-top:1px solid #241510;border-bottom:1px solid #241510}
.youtube h2{max-width:900px;margin:12px auto}
.youtube p:not(.eyebrow){max-width:720px;margin:0 auto 30px}
.youtubeBtn{display:inline-block;background:#ff0033;color:#fff;text-decoration:none;padding:15px 24px;border-radius:4px;font-weight:800;box-shadow:0 10px 35px #ff003329;transition:.3s}
.youtubeBtn:hover{transform:translateY(-3px);box-shadow:0 14px 45px #ff003344}

.videoPoster{height:390px;background:#000;overflow:hidden}.videoPoster video{width:100%;height:100%;object-fit:cover}.music-card p{color:#d8a52a}@media(max-width:900px){.videoPoster{height:300px}}


/* ===== Mobile-first responsive fixes ===== */
@media (max-width: 900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .topbar{height:auto;min-height:72px;padding:10px 14px;gap:10px;flex-wrap:wrap}
  .brand{min-width:0;max-width:58%}
  .brand img{width:42px;height:42px;flex:0 0 auto}
  .brand span{display:block!important;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
  .menuBtn{display:block;margin-left:auto}
  .actions{width:auto;gap:6px}
  .actions select,.sound,.menuBtn{padding:7px 10px;font-size:12px}
  .topbar nav{
    display:none;position:absolute;top:100%;left:12px;right:12px;
    flex-direction:column;gap:0;background:#0b0b0bf8;
    border:1px solid #332919;padding:8px;border-radius:10px;
    box-shadow:0 18px 45px #0008
  }
  .topbar nav.open{display:flex}
  .topbar nav a{padding:12px 10px;font-size:14px;border-bottom:1px solid #211b12}
  .topbar nav a:last-child{border-bottom:0}

  .hero{min-height:100svh;padding:110px 18px 56px}
  .heroLogo{width:min(290px,74vw);margin-bottom:8px}
  .heroText{width:100%;max-width:100%;margin-top:-8px;padding:0 2px}
  .hero h1{
    font-size:clamp(30px,9vw,48px);
    line-height:1.05;
    overflow-wrap:anywhere;
    word-break:break-word;
    max-width:100%;
  }
  .hero h2{
    font-size:clamp(20px,6vw,30px);
    line-height:1.28;
    padding:0 4px;
    overflow-wrap:anywhere
  }
  .heroText>p:not(.eyebrow){
    max-width:100%;font-size:14px;line-height:1.7;padding:0 2px
  }
  .eyebrow{font-size:10px;letter-spacing:2.6px;overflow-wrap:anywhere}
  .cta{gap:10px}
  .goldBtn,.ghostBtn{
    width:min(100%,320px);text-align:center;padding:13px 16px;font-size:13px;
    white-space:normal;overflow-wrap:anywhere
  }
  .halo{width:86vw;height:86vw;max-width:420px;max-height:420px}

  .section{padding:68px 18px;width:100%;max-width:100%}
  .split,.cards,.gallery{grid-template-columns:1fr!important;gap:18px}
  .split{gap:18px}
  .section h2{
    font-size:clamp(30px,8vw,44px);
    line-height:1.18;
    overflow-wrap:anywhere;
    word-break:normal
  }
  .section p{font-size:14px;line-height:1.75;overflow-wrap:anywhere}
  .sectionHead{display:block;margin-bottom:26px}
  .sectionHead p{max-width:100%}

  .card{width:100%;min-width:0}
  .poster,.videoPoster{height:250px!important}
  .videoPoster video{width:100%;height:100%;object-fit:cover}
  .card h3{font-size:19px;overflow-wrap:anywhere}
  .card p{font-size:13px}

  .gallery{grid-template-columns:1fr!important}
  .shot{min-height:200px;width:100%;min-width:0}
  .shot span{letter-spacing:2px;font-size:10px;overflow-wrap:anywhere}

  .youtube{padding-left:18px!important;padding-right:18px!important}
  .youtube h2{font-size:clamp(28px,7.5vw,42px)}
  .youtubeBtn{
    display:block;width:min(100%,330px);margin:0 auto;
    padding:14px 16px;white-space:normal;overflow-wrap:anywhere
  }

  .contact img{width:120px}
  .contact h2{font-size:clamp(30px,8vw,44px)}
  .contact .goldBtn{display:block;margin:0 auto;overflow-wrap:anywhere}

  footer{
    flex-direction:column;text-align:center;
    padding:24px 18px;font-size:11px;overflow-wrap:anywhere
  }
}

@media (max-width: 520px){
  .topbar{padding:8px 10px}
  .brand span{max-width:115px;font-size:11px}
  .actions select{max-width:92px}
  .hero{padding-left:14px;padding-right:14px}
  .heroLogo{width:min(250px,72vw)}
  .hero h1{font-size:clamp(27px,8.5vw,38px)}
  .hero h2{font-size:clamp(19px,6vw,26px)}
  .section{padding-left:14px;padding-right:14px}
  .poster,.videoPoster{height:220px!important}
}

@media (max-width: 380px){
  .brand span{display:none!important}
  .actions select{max-width:82px;font-size:11px}
  .hero h1{font-size:27px}
  .goldBtn,.ghostBtn{font-size:12px}
}


/* ===== TamilanProduction cinematic opening intro ===== */
.cinemaIntro{position:fixed;inset:0;z-index:9999;background:#020202;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .85s ease,visibility .85s ease}
.cinemaIntro.done{opacity:0;visibility:hidden;pointer-events:none}
.introSmoke{position:absolute;width:130vw;height:130vw;max-width:1100px;max-height:1100px;border-radius:50%;background:radial-gradient(circle,#9d3b0b22 0,#4c160815 24%,transparent 64%);filter:blur(18px);animation:introSmoke 5.8s ease-in-out both}
.introRing{position:absolute;width:min(58vw,520px);height:min(58vw,520px);border-radius:50%;opacity:0;filter:drop-shadow(0 0 15px #ff5a00) drop-shadow(0 0 35px #ff950066)}
.ringOne{border:3px solid #e5791c;box-shadow:inset 0 0 22px #ff7b00,0 0 26px #ff5a00;animation:ringIgnite 5.5s .55s ease both}
.ringTwo{width:min(64vw,575px);height:min(64vw,575px);border:1px solid #f5b64a66;box-shadow:0 0 45px #ff640033;animation:ringIgnite 5.5s .8s ease both reverse}
.introLogo{position:relative;z-index:3;width:min(390px,58vw);max-height:48vh;object-fit:contain;opacity:0;transform:scale(.74);filter:brightness(.15) drop-shadow(0 18px 35px #000);animation:logoReveal 5.4s 1s cubic-bezier(.2,.8,.2,1) forwards}
.introTitles{position:absolute;z-index:4;top:72%;left:15px;right:15px;text-align:center;opacity:0;transform:translateY(15px);animation:titleReveal 1.3s 4.4s ease forwards}
.introTitles strong{display:block;font:700 clamp(26px,4.5vw,58px) Georgia,serif;letter-spacing:.5px;background:linear-gradient(90deg,#8e5b0d,#ffe59a,#c8891b);-webkit-background-clip:text;color:transparent;text-shadow:0 0 25px #f5a62310;overflow-wrap:anywhere}
.introTitles span{display:block;margin-top:7px;color:#f0c35b;font-size:clamp(16px,2.2vw,28px);letter-spacing:1px}
.introSparks{position:absolute;inset:0;z-index:2;pointer-events:none}
.introSparks i{position:absolute;left:50%;top:52%;width:3px;height:3px;border-radius:50%;background:#ffd37a;box-shadow:0 0 8px #ff7b00;opacity:0}
.introSparks i:nth-child(1){--x:-36vw;--y:-30vh;animation:spark 2.6s 1s infinite}
.introSparks i:nth-child(2){--x:31vw;--y:-26vh;animation:spark 2.2s 1.3s infinite}
.introSparks i:nth-child(3){--x:-27vw;--y:25vh;animation:spark 2.8s .8s infinite}
.introSparks i:nth-child(4){--x:38vw;--y:22vh;animation:spark 2.4s 1.7s infinite}
.introSparks i:nth-child(5){--x:-14vw;--y:-37vh;animation:spark 2.1s 2s infinite}
.introSparks i:nth-child(6){--x:18vw;--y:34vh;animation:spark 2.5s 1.1s infinite}
.introSparks i:nth-child(7){--x:-42vw;--y:8vh;animation:spark 2.7s 1.5s infinite}
.introSparks i:nth-child(8){--x:44vw;--y:-4vh;animation:spark 2.3s .9s infinite}
.introSparks i:nth-child(9){--x:-8vw;--y:39vh;animation:spark 2.6s 1.9s infinite}
.introSparks i:nth-child(10){--x:9vw;--y:-40vh;animation:spark 2.4s 1.4s infinite}
.skipIntro{position:absolute;right:22px;bottom:20px;z-index:8;border:1px solid #7d622e;background:#08080899;color:#d5b56e;border-radius:20px;padding:8px 14px;font-size:10px;letter-spacing:2px;cursor:pointer}
@keyframes introSmoke{0%{opacity:0;transform:scale(.65)}35%{opacity:1}100%{opacity:.35;transform:scale(1.15)}}
@keyframes ringIgnite{0%{opacity:0;transform:scale(.55) rotate(0)}28%{opacity:.9}75%{opacity:.7}100%{opacity:.15;transform:scale(1.05) rotate(180deg)}}
@keyframes logoReveal{0%{opacity:0;transform:scale(.74);filter:brightness(.1) blur(4px)}28%{opacity:.35}62%{opacity:1;filter:brightness(.8) drop-shadow(0 0 24px #ff650055)}100%{opacity:1;transform:scale(1);filter:brightness(1) drop-shadow(0 12px 30px #000)}}
@keyframes titleReveal{to{opacity:1;transform:none}}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.4)}18%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.5)}}
@media(max-width:600px){
 .introLogo{width:min(290px,70vw);max-height:42vh}
 .introRing{width:76vw;height:76vw}.ringTwo{width:84vw;height:84vw}
 .introTitles{top:68%;padding:0 12px}
 .introTitles strong{font-size:clamp(24px,8vw,38px);line-height:1.08}
 .introTitles span{font-size:clamp(16px,5vw,22px)}
 .skipIntro{right:12px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){.introSmoke,.introRing,.introLogo,.introTitles,.introSparks i{animation-duration:.01ms!important;animation-delay:0s!important}}