/* ============================================================
   TASC INTRO — montaj pembuka (prefix tin-)
   Dimuatkan pada home sahaja. Main sekali setiap sesi pelayar.
   ============================================================ */
.tin-overlay{
  position:fixed;inset:0;z-index:99999;overflow:hidden;
  background:
    radial-gradient(800px 480px at 50% 120%, rgba(232,184,75,.30), transparent 60%),
    radial-gradient(700px 420px at 82% -6%, rgba(245,224,168,.45), transparent 58%),
    linear-gradient(165deg, #fffdf8 0%, #fbf3e2 45%, #f6ead0 75%, #f1e3c6 100%);
  background-color:#fbf8f2;
}
/* Lampu limpah naik dari bawah ke atas */
.tin-wash{
  position:absolute;left:0;right:0;bottom:0;height:65%;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(232,184,75,.55) 0%, rgba(232,184,75,.22) 35%, transparent 100%);
  opacity:0;transform:translateY(30px);
  transition:opacity 1.6s ease, transform 1.6s ease;
}
.tin-overlay.tin-mula .tin-wash{opacity:1;transform:translateY(0);animation:tin-washPulse 4s ease-in-out infinite 1.6s}
@keyframes tin-washPulse{0%,100%{opacity:.85}50%{opacity:1}}
.tin-wash-core{
  position:absolute;left:50%;bottom:-10%;width:680px;height:420px;transform:translateX(-50%);
  z-index:1;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,238,190,.85), rgba(232,184,75,.35) 45%, transparent 72%);
  filter:blur(20px);opacity:0;transition:opacity 1.6s ease;
}
.tin-overlay.tin-mula .tin-wash-core{opacity:1;animation:tin-washPulse 4s ease-in-out infinite 1.6s}
.tin-overlay.tin-tutup{pointer-events:none}

.tin-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(10,42,94,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,42,94,.05) 1px,transparent 1px);
  background-size:52px 52px;  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000,transparent 80%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000,transparent 80%);
  opacity:0;transition:opacity 1s ease;
}
.tin-overlay.tin-mula .tin-grid{opacity:1}

.tin-glow{
  position:absolute;top:50%;left:50%;width:900px;height:900px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 72%, rgba(232,184,75,.14) 86%, transparent 100%);
  animation:tin-spin 12s linear infinite;opacity:0;transition:opacity 1.2s ease;
}
.tin-overlay.tin-mula .tin-glow{opacity:1}
@keyframes tin-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Blob bercahaya yang bergerak perlahan */
.tin-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:0;pointer-events:none;transition:opacity 1.4s ease}
.tin-overlay.tin-mula .tin-blob{opacity:.55}
.tin-blob1{width:420px;height:420px;background:rgba(232,184,75,.45);top:-80px;left:-60px;animation:tin-apung 14s ease-in-out infinite}
.tin-blob2{width:360px;height:360px;background:rgba(46,94,160,.30);bottom:-100px;right:-60px;animation:tin-apung 18s ease-in-out infinite reverse}
.tin-blob3{width:300px;height:300px;background:rgba(200,151,43,.28);top:40%;right:18%;animation:tin-apung 16s ease-in-out infinite}
@keyframes tin-apung{
  0%,100%{transform:translate(0,0) scale(1)}
  33%    {transform:translate(40px,-30px) scale(1.08)}
  66%    {transform:translate(-30px,25px) scale(.95)}
}

/* Bulatan sinar mengembang dari tengah */
.tin-ring{
  position:absolute;top:50%;left:50%;border-radius:50%;
  border:1.5px solid rgba(200,151,43,.35);
  transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;
}
.tin-overlay.tin-mula .tin-ring{animation:tin-kembang 5s ease-out infinite}
.tin-ring1{width:300px;height:300px;animation-delay:0s !important}
.tin-ring2{width:300px;height:300px;animation-delay:1.6s !important}
.tin-ring3{width:300px;height:300px;animation-delay:3.2s !important}
@keyframes tin-kembang{
  0%  {transform:translate(-50%,-50%) scale(.2);opacity:.7}
  100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}
}

.tin-particles{position:absolute;inset:0;width:100%;height:100%}

.tin-core{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;z-index:4;
}
.tin-logo{
  width:min(340px,72vw);opacity:0;transform:scale(.82);
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.45));
}
.tin-logo.tin-show{animation:tin-logoIn 1s cubic-bezier(.22,1,.36,1) forwards}
@keyframes tin-logoIn{to{opacity:1;transform:scale(1)}}

.tin-rule{height:3px;width:0;background:linear-gradient(90deg,#c8972b,#e8b84b);border-radius:3px;box-shadow:0 0 14px rgba(232,184,75,.6)}
.tin-rule.tin-show{animation:tin-ruleIn .9s ease forwards .25s}
@keyframes tin-ruleIn{to{width:min(220px,52vw)}}

.tin-greet{
  color:#0a2a5e;font-family:'Fraunces',Georgia,serif;font-size:clamp(20px,3.4vw,32px);
  line-height:1.3;letter-spacing:.01em;opacity:0;text-align:center;padding:0 24px;
  position:relative;z-index:4;text-shadow:0 1px 12px rgba(255,255,255,.5);
}
.tin-greet.tin-show{animation:tin-greetIn .7s ease forwards}
@keyframes tin-greetIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tin-sub{color:#aabce0;font-size:14px;letter-spacing:.18em;text-transform:uppercase;opacity:0;text-align:center;padding:0 16px}
.tin-sub.tin-show{animation:tin-subIn .6s ease forwards}
@keyframes tin-subIn{to{opacity:1}}

/* Transisi keluar: zoom-fade — intro mengezum keluar & pudar, dedah home dengan lembut */
.tin-overlay.tin-keluar{
  animation:tin-keluar 1.3s cubic-bezier(.6,0,.2,1) forwards;
}
.tin-overlay.tin-keluar .tin-core{
  animation:tin-coreNaik 1.1s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes tin-keluar{
  0%   {opacity:1; transform:scale(1);   -webkit-clip-path:circle(150% at 50% 50%); clip-path:circle(150% at 50% 50%)}
  100% {opacity:0; transform:scale(1.18); -webkit-clip-path:circle(0% at 50% 45%);  clip-path:circle(0% at 50% 45%)}
}
@keyframes tin-coreNaik{
  0%   {opacity:1; transform:translateY(0) scale(1)}
  100% {opacity:0; transform:translateY(-26px) scale(1.06)}
}

.tin-skip{
  position:absolute;bottom:26px;right:28px;z-index:7;
  border:1px solid #e7e2d6;background:rgba(255,255,255,.85);
  color:#0a2a5e;padding:9px 18px;border-radius:50px;font-size:13px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:7px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(10,42,94,.10);transition:.25s;
}
.tin-skip:hover{border-color:#c8972b;color:#c8972b}

.tin-prog{position:absolute;bottom:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#c8972b,#e8b84b);z-index:7}
.tin-overlay.tin-mula .tin-prog{transition:width 3.4s linear;width:100%}