/* =========================================================
   Açılış animasyonu: yıldızlar tutuşur, logo harf harf belirir,
   aksanın ucunda bir yıldız parlar.
   ========================================================= */
.hero .logo-wrap { position: relative; }
.hero .logo path { transform-box: fill-box; }
.glint { position: absolute; left: 39.8%; top: 0; width: clamp(70px, 12vw, 130px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(.5); opacity: .7; pointer-events: none;
  background: radial-gradient(circle, rgba(70,70,70,.32) 0, rgba(70,70,70,.08) 16%, transparent 58%); animation: twinkle 3.2s ease-in-out 3.6s infinite; }
.glint::before, .glint::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.glint::before { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #555 50%, transparent); }
.glint::after { width: 1px; height: 72%; background: linear-gradient(180deg, transparent, #555 50%, transparent); }
@keyframes twinkle { 0%, 100% { transform: translate(-50%, -50%) scale(.5) rotate(0); opacity: .7; } 50% { transform: translate(-50%, -50%) scale(.62) rotate(8deg); opacity: .95; } }

html.intro .hero .orbits [pathLength] { stroke-dasharray: 100; animation: drawLine 2.6s cubic-bezier(.6,0,.2,1) .15s both; }
html.intro .hero .orbits .dot { animation: fadeIn 1s 1.8s both; }
html.intro .hero .logo .ltr { transform-origin: 50% 100%; animation: ltrIn 1.05s cubic-bezier(.2,.75,.2,1) both; animation-delay: calc(.85s + var(--i) * .075s); }
html.intro .hero .logo .acc { transform-origin: 0 100%; animation: accIn .75s cubic-bezier(.2,.8,.2,1.2) 1.85s both; }
html.intro .hero .logo .sub { animation: fadeIn .9s ease both; animation-delay: calc(2.05s + var(--i) * .022s); }
html.intro .glint { animation: glintIn 1.5s cubic-bezier(.2,.7,.2,1) 2.2s both, twinkle 3.2s ease-in-out 3.7s infinite; }
html.intro .hero .slogan { animation: fadeUp 1.1s cubic-bezier(.2,.7,.2,1) 2.6s both; }
html.intro .hero .scroll { animation: fadeIn 1s 3.1s both; }
html.intro .top nav { animation: fadeIn 1s 2.9s both; }

@keyframes drawLine { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ltrIn { from { opacity: 0; transform: translateY(38%) scaleY(.6); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes accIn { from { opacity: 0; transform: translate(-60%, 60%) scale(.3); } to { opacity: 1; transform: none; } }
@keyframes glintIn {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-45deg); opacity: 0; }
  35% { transform: translate(-50%, -50%) scale(1.35) rotate(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(.5) rotate(0); opacity: .7; }
}
@media (prefers-reduced-motion: reduce) { .glint { animation: none; } }
