/* ============================================================
   Rotatelab — shared styles  (Rovio + Grand inspired)
   Brand palette: teal #00ACB7 · navy #19385E · blue #19385E
                  yellow #FDCA09 · coral #F15B5B
   ============================================================ */

:root {
  --ease: cubic-bezier(.22, 1, .36, 1);          /* refined ease-out */
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);  /* gentle spring */
}

html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
body {
  background-color: #FFFFFF;
  color: #000000;
  font-family: 'Outfit', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* pageIn animasyonu kaldırıldı: body opacity:0 başlayınca Lighthouse mobilde
     LCP adayı bulamıyordu (NO_LCP → performans skoru 0). Derlenmiş tailwind.css
     kullanıldığı için CDN FOUC riski de yok. */
}

/* ---------- Colourful backdrop blobs ---------- */
.backdrop-blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 9999px; filter: blur(80px); opacity: .35; }
.blob.b1 { width: 40rem; height: 40rem; left: -12rem; top: -8rem; background: rgba(0,172,183,.55); animation: drift 24s ease-in-out infinite alternate; }
.blob.b2 { width: 30rem; height: 30rem; right: -10rem; top: 24rem; background: rgba(241,91,91,.32); animation: drift 28s ease-in-out infinite alternate-reverse; }
.blob.b3 { width: 34rem; height: 34rem; left: 36%; bottom: -14rem; background: rgba(253,202,9,.26); animation: drift 32s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(4%, -6%, 0) scale(1.12); } }

/* ---------- Top bar (white, navy menu) ---------- */
.topbar { background: #FFFFFF; transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
.topbar.scrolled { box-shadow: none; }

/* Overlay header — transparent over a full-bleed hero, dark fade at top, solid black on scroll */
.topbar.topbar-overlay { background: transparent; }
.topbar.topbar-overlay::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 340px; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 35%, rgba(0,0,0,.35) 65%, rgba(0,0,0,0) 100%);
  pointer-events: none; transition: opacity .35s var(--ease);
}
.topbar.topbar-overlay.scrolled { background: #000000; box-shadow: 0 8px 24px -14px rgba(0,0,0,.55); }
.topbar.topbar-overlay.scrolled::before { opacity: 0; }
/* Hovering the header fills its background too (so the dropdown doesn't float over a transparent bar).
   The gradient stays during hover (only removed on scroll) so there's no flicker on hover in/out. */
.topbar.topbar-overlay:hover { background: #000000; box-shadow: 0 8px 24px -14px rgba(0,0,0,.55); }

/* Light overlay — transparent over a light hero, dark text, white fade under header, white on scroll */
.topbar.topbar-overlay.topbar-light::before { background: linear-gradient(to bottom, rgba(255,255,255,.95) 0%, rgba(255,255,255,.7) 35%, rgba(255,255,255,.35) 65%, rgba(255,255,255,0) 100%); }
.topbar.topbar-overlay.topbar-light.scrolled { background: #FFFFFF; box-shadow: none; }
.topbar.topbar-overlay.topbar-light:hover { background: #FFFFFF; box-shadow: none; }

/* Invert overlay (cube/sort) — keeps the BLACK gradient + white text at top,
   but fills WHITE with dark text/logo on scroll or header hover. */
.topbar.topbar-overlay.topbar-invert.scrolled,
.topbar.topbar-overlay.topbar-invert:hover { background: #FFFFFF; box-shadow: 0 8px 24px -14px rgba(0,0,0,.25); }
.topbar.topbar-overlay.topbar-invert:hover::before { opacity: 0; }               /* hide black gradient once white fills */
/* nav text: white at top → black on scroll/hover, teal on the hovered link */
.topbar.topbar-overlay.topbar-invert.scrolled .navlink,
.topbar.topbar-overlay.topbar-invert:hover .navlink { color: #000; }
.topbar.topbar-overlay.topbar-invert.scrolled .navlink:hover,
.topbar.topbar-overlay.topbar-invert:hover .navlink:hover { color: #00ACB7; }
.topbar.topbar-overlay.topbar-invert.scrolled #menuBtn,
.topbar.topbar-overlay.topbar-invert:hover #menuBtn { color: #000; }
/* dual logo cross-fade */
.topbar.topbar-overlay.topbar-invert .logo-dark { opacity: 0; transition: opacity .3s var(--ease); }
.topbar.topbar-overlay.topbar-invert .logo-light { transition: opacity .3s var(--ease); }
.topbar.topbar-overlay.topbar-invert.scrolled .logo-dark,
.topbar.topbar-overlay.topbar-invert:hover .logo-dark { opacity: 1; }
.topbar.topbar-overlay.topbar-invert.scrolled .logo-light,
.topbar.topbar-overlay.topbar-invert:hover .logo-light { opacity: 0; }

/* ---------- Nav links (colour change on hover, no underline) ---------- */
.navlink { transition: color .25s var(--ease); }

/* ---------- Bold colour footer block ---------- */
.footer-block { background: #19385E; }
/* Sosyal ikon renkleri: --sc taban, --sch hover (panelden ayarlanır). */
.footer-social { color: var(--sc, #fff); }
.footer-social:hover { color: var(--sch, #00ACB7); }

/* ---------- Floating tiles ---------- */
.floaty { animation: floaty 6s ease-in-out infinite; }
.floaty.d1 { animation-delay: -1.2s; } .floaty.d2 { animation-delay: -2.6s; } .floaty.d3 { animation-delay: -4s; } .floaty.d4 { animation-delay: -5s; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-18px) rotate(calc(var(--r,0deg) + 3deg)); } }

/* ---------- Rotating mark ---------- */
.spin-slow { animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Scroll reveal (blur + lift + scale) ---------- */
.reveal { opacity: 0; transform: translateY(34px) scale(.985); filter: blur(8px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: none; }
/* Hero (ilk ekran): JS'i beklemeden ayni reveal animasyonu CSS ile otomatik baslar (LCP) */
#hero .reveal { animation: heroRevealIn .8s var(--ease) forwards; }
@keyframes heroRevealIn { to { opacity: 1; transform: none; filter: none; } }

/* ---------- Gradient text ---------- */
.grad-text { background: linear-gradient(110deg, #00ACB7 0%, #19385E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-warm { background: linear-gradient(110deg, #F15B5B 0%, #FDCA09 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Rotating word ---------- */
.rotator { display: inline-grid; vertical-align: baseline; }
.rotator > span { grid-area: 1 / 1; opacity: 0; transform: translateY(0.4em) rotateX(-40deg); transform-origin: bottom; transition: opacity .5s var(--ease), transform .5s var(--ease); white-space: nowrap; }
.rotator > span.active { opacity: 1; transform: none; }
.rotator > span.leaving { opacity: 0; transform: translateY(-0.4em) rotateX(40deg); }

/* ---------- Marquee (edge fade + pause on hover) ---------- */
.marquee { display: flex; width: max-content; animation: marquee 30s linear infinite; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Light glass card (hover depth, no transform clash) ---------- */
.card { background: rgba(255,255,255,.82); border: 1px solid rgba(25,56,94,.08); backdrop-filter: blur(10px); box-shadow: 0 16px 40px -18px rgba(25,56,94,.25); transition: box-shadow .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease); }
.card:hover { box-shadow: 0 34px 64px -22px rgba(25,56,94,.4); border-color: rgba(0,172,183,.28); }

/* ---------- Buttons ---------- */
.btn-press { transition: transform .25s var(--ease-spring), box-shadow .3s var(--ease), background-color .2s, filter .2s; }
.btn-press:hover { transform: translateY(-3px); filter: saturate(1.05); }
.btn-press:active { transform: translateY(0) scale(.96); }
.btn-press svg { transition: transform .3s var(--ease); }

/* ---------- App art tile (cursor-tracked specular glare) ---------- */
.art { position: relative; border-radius: 1.8rem; overflow: hidden; aspect-ratio: 1/1; box-shadow: 0 36px 70px -24px rgba(25,56,94,.6), inset 0 0 0 1px rgba(255,255,255,.2); }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(200px circle at var(--mx,50%) var(--my,-8%), rgba(255,255,255,.42), transparent 52%),
  linear-gradient(160deg, rgba(255,255,255,.2), transparent 42%); }
.tilt { transition: transform .35s var(--ease); will-change: transform; }
.tilt-wrap:hover .art img { transform: scale(1.04); }

/* ---------- Mouse-follow float (Stay in the Game illustration) ---------- */
.mouse-float { transition: transform .3s var(--ease); will-change: transform; }

/* ---------- Hero colourful splashes ---------- */
.hsplash { position: absolute; border-radius: 9999px; filter: blur(8px); opacity: .9; }

/* ---------- Section label ---------- */
.eyebrow { font-weight: 800; text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; }

/* ---------- Wavy divider ---------- */
.wave { display: block; width: 100%; height: auto; }

/* ---------- Hero slider ---------- */
/* Image is 16:7 with characters at the far left/right and empty white top/bottom.
   `100% auto` always fills the width (sides never cropped) and only ever crops/letterboxes
   the empty vertical whitespace, centered. Scale-invariant — no breakpoints needed:
   wide box (==16:7) → perfect fit; narrow box (taller via min-h) → seamless white letterbox. */
.hero-slide { position: absolute; inset: 0; background-image: var(--bg); background-size: 100% auto; background-repeat: no-repeat; background-position: center; opacity: 0; transition: opacity 1.1s var(--ease); }
.hero-slide.active { opacity: 1; }
/* Mobile: dikey 4:5 banner — --bg-mobile varsa onu, yoksa masaüstü görseli kırparak kullan */
@media (max-width: 639.98px) {
  .hero-slide { background-image: var(--bg-mobile, var(--bg)); background-size: contain; background-position: top center; }
}
.hero-title { text-shadow: 0 2px 28px rgba(0,0,0,.55), 0 1px 6px rgba(0,0,0,.45); }
.hero-dot { width: 9px; height: 9px; border-radius: 9999px; background: rgba(255,255,255,.45); transition: background .3s, width .3s; cursor: pointer; }
.hero-dot.active { background: #fff; width: 26px; }

/* ---------- Featured banner aligned to 2nd screenshot column, but never narrower than ~1060px ---------- */
/* inset = min(one-column+gap, whatever keeps the banner >= 1060px wide) → 2nd-photo look on wide screens,
   comfortable width (text doesn't get cramped) on smaller ones */
.banner-2nd { }
/* 1024–1599px: inset reduced (×0.55) so the featured area is a bit wider on each side. 1600px+ (high-res) left untouched. */
@media (min-width: 1024px) { .banner-2nd { margin-inline: min(calc(((100% - 60px)  / 4 + 20px) * 0.55), max(0px, calc((100% - 1060px) / 2))); } }
@media (min-width: 1280px) { .banner-2nd { margin-inline: min(calc(((100% - 80px)  / 5 + 20px) * 0.55), max(0px, calc((100% - 1060px) / 2))); } }
@media (min-width: 1600px) { .banner-2nd { margin-inline: min(calc((100% - 100px) / 6 + 20px), max(0px, calc((100% - 1060px) / 2))); } }

/* ---------- Footer menu link wavy per-letter bounce on hover ---------- */
.footer-letter { display: inline-block; }
.footer-bounce:hover .footer-letter { animation: footerWave .55s ease; }
@keyframes footerWave {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-9px); }
  55%  { transform: translateY(0); }
  75%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

.game-media.is-active > img { opacity: 0; --tw-scale-x: .95; --tw-scale-y: .95; }
.game-media.is-active [data-hover-video] { opacity: 1; --tw-scale-x: 1; --tw-scale-y: 1; }
/* Touch devices (no real hover): keep the static icon, never reveal the video on tap/hold */
@media (hover: none) {
  .game-media:hover > img { opacity: 1 !important; transform: none !important; }
  .game-media:hover [data-hover-video] { opacity: 0 !important; }
}

/* ---------- Button sweep fill on hover (left → right #00ACB7, text → black) ---------- */
.btn-sweep { position: relative; overflow: hidden; z-index: 0; transition: color .55s cubic-bezier(.4,0,.2,1); }
.btn-sweep::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #00ACB7;
  clip-path: ellipse(0% 75% at 0% 50%);
  transition: clip-path .55s cubic-bezier(.4,0,.2,1);
  will-change: clip-path;
}
.btn-sweep:hover::before { clip-path: ellipse(150% 150% at 0% 50%); }
.btn-sweep:hover { color: #000; }
/* Flat (straight-edge) sweep variant — e.g. dropdown menu items */
.btn-sweep.sweep-flat::before { clip-path: none; transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.btn-sweep.sweep-flat:hover::before { clip-path: none; transform: scaleX(1); }

/* ---------- Per-word hover color (hero title) ---------- */
.hover-word { display: inline-block; transition: color .25s var(--ease); cursor: default; }
.hover-word:hover { color: #00ACB7; }

/* ---------- Wavy per-letter hover text (careers heading) ---------- */
.wave-word { display: inline-block; white-space: nowrap; }
.wave-letter { display: inline-block; }
.wave-hover:hover .wave-letter { animation: waveTextBounce .55s ease; }
@keyframes waveTextBounce {
  0%   { transform: translateY(0);    color: #000; }
  20%  { transform: translateY(-10px); color: var(--wave-color, #F15B5B); }
  55%  { transform: translateY(0);    color: var(--wave-color, #F15B5B); }
  75%  { transform: translateY(-3px); color: var(--wave-color, #F15B5B); }
  100% { transform: translateY(0);    color: #000; }
}

/* ---------- Careers bear bounce on hover ---------- */
.bear-bounce { transition: transform .2s var(--ease); will-change: transform; }
.bear-bounce:hover { animation: bearBounce .7s ease; }
@keyframes bearBounce {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-24px); }
  45%  { transform: translateY(0); }
  62%  { transform: translateY(-11px); }
  78%  { transform: translateY(0); }
  90%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* ---------- Screenshot carousel cards (whole columns fill width = centered, no crop) ---------- */
/* gap-5 = 20px between cards */
.sshot { flex: 0 0 auto; height: auto; display: block; position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  width: calc((100% - 20px) / 2); }                                                                  /* 2 across */
@media (min-width: 640px)  { .sshot { width: calc((100% - 40px) / 3); } }                            /* 3 across */
@media (min-width: 1024px) { .sshot { width: calc((100% - 60px) / 4); } }                            /* 4 across */
@media (min-width: 1280px) { .sshot { width: calc((100% - 80px) / 5); } }                            /* 5 across */
@media (min-width: 1600px) { .sshot { width: calc((100% - 100px) / 6); } }                           /* 6 across */

/* hover: photo lifts a bit + white frame (animated) */
.sshot:hover { transform: translateY(-12px); z-index: 5;
  box-shadow: 0 0 0 8px #FDCA09, 0 16px 30px -12px rgba(0,0,0,.5); }

/* keep the gameplay video on its own compositing layer so it doesn't flash white while the track is dragged/animated */
video.sshot { will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* drag-to-scroll affordance + no lift while dragging */
#shotTrack { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
#shotTrack img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
#shotTrack.dragging { cursor: grabbing; }
#shotTrack.dragging .sshot { transition: none; }
#shotTrack.dragging .sshot:hover { transform: none; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }

/* ---------- Screenshot carousel dots (dashes: yellow active, white rest) ---------- */
.sdot { width: 24px; height: 2px; border-radius: 0; background: #ffffff; border: 0; padding: 0; cursor: pointer; transition: background .3s var(--ease); }
.sdot:hover { background: #e7edf4; }
.sdot.is-active { background: #FDCA09; }
.sdot.is-active:hover { background: #FDCA09; }

/* ---------- Focus ring (premium, only for keyboard) ---------- */
:focus-visible { outline: 2px solid #00ACB7; outline-offset: 3px; border-radius: 10px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .rotator > span:not(.active) { display: none; }
  html { scroll-behavior: auto; }
}