/* =========================================================
   ARROW IT — Y2K DIGITAL FUTURE
   Brand font: "Arrow IT" (Fast / Faster / Fastest)
   ========================================================= */

/* ---------- FONT FACES ---------- */
@font-face {
  font-family: "Arrow IT";
  src: url("../../typografie/Arrow IT Fast.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Arrow IT";
  src: url("../../typografie/Arrow_IT_Faster.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Arrow IT";
  src: url("../../typografie/Arrow_IT_Fastest.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

/* ---------- TOKENS ---------- */
:root {
  --pink:      #FF1493;
  --pink-soft: #ff5cb8;
  --teal:      #00D9D9;
  --chrome:    #DADADA;
  --dark:      #161616;
  --pearl:     #F7F3EE;
  --pearl-2:   #efe9e0;

  --brand: "Arrow IT", "Inter", system-ui, sans-serif;
  --body:  "Inter", "Helvetica Neue", Arial, sans-serif;

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;

  --glow-pink: 0 0 40px rgba(255, 20, 147, .35);
  --shadow:    0 20px 60px rgba(22, 22, 22, .12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--pearl);
  color: var(--dark);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* =========================================================
   GRAIN + GLOW OVERLAYS
   ========================================================= */
.grain {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette {
  position: fixed; inset: 0; z-index: 8999; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(22,22,22,.06) 100%);
}

/* =========================================================
   FLOATING Y2K ELEMENTS
   ========================================================= */
.floaters { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }

.f-sphere, .f-star, .f-chrome, .f-arrow, .f-ring {
  position: absolute; opacity: .8; will-change: transform;
}
.f-sphere {
  width: 130px; height: 130px; left: 8%; top: 28%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0%, var(--chrome) 30%, #9a9a9a 70%, #6f6f6f 100%);
  box-shadow: inset -8px -10px 22px rgba(0,0,0,.25), 0 12px 30px rgba(0,0,0,.15);
  animation: floatY 11s ease-in-out infinite;
}
.f-sphere.sm { width: 60px; height: 60px; left: 82%; top: 60%; animation-duration: 9s; }
.f-sphere.teal {
  width: 90px; height: 90px; left: 70%; top: 14%;
  background: radial-gradient(circle at 32% 28%, #e6ffff 0%, var(--teal) 40%, #009b9b 100%);
  box-shadow: inset -6px -8px 18px rgba(0,0,0,.25), var(--glow-pink);
  animation-duration: 13s;
}
.f-star { font-size: 30px; color: var(--pink); left: 24%; top: 70%; text-shadow: var(--glow-pink); animation: twinkle 4s ease-in-out infinite; }
.f-star.sm { font-size: 16px; left: 60%; top: 40%; color: var(--teal); animation-delay: 1s; }
.f-star.pink { left: 88%; top: 30%; animation-delay: 2s; }
.f-chrome { font-size: 36px; color: var(--chrome); left: 14%; top: 84%; text-shadow: 0 2px 6px rgba(0,0,0,.3); animation: floatY 15s ease-in-out infinite; }
.f-arrow { font-size: 22px; color: var(--dark); left: 46%; top: 88%; opacity: .35; animation: floatY 12s ease-in-out infinite; }
.f-arrow.pink { color: var(--pink); left: 90%; top: 75%; opacity: .55; }
.f-ring {
  width: 70px; height: 70px; border: 3px solid var(--pink); border-radius: 50%;
  left: 36%; top: 18%; opacity: .4; box-shadow: var(--glow-pink);
  animation: spin 18s linear infinite;
}

@keyframes floatY { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-34px) } }
@keyframes twinkle { 0%,100% { transform: scale(1); opacity: .85 } 50% { transform: scale(1.4); opacity: .3 } }
@keyframes spin { to { transform: rotate(360deg) } }

/* =========================================================
   FESTIVAL INTRO LOADER
   ========================================================= */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--pearl);
  display: grid; place-items: center;
  transition: opacity .6s ease, visibility .6s ease;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; }
.loader-logo {
  display: flex; align-items: center; gap: 14px; justify-content: center;
  font-family: var(--brand); font-weight: 800; font-size: clamp(40px, 9vw, 96px);
  letter-spacing: 2px;
  color: var(--dark);
  filter: blur(6px) contrast(0.6);
  transform: scale(1.6);
  image-rendering: pixelated;
  animation: loaderIn 1.8s cubic-bezier(.16,.84,.34,1) forwards;
}
.loader-arrow { font-size: .8em; }
.loader-bar {
  margin: 30px auto 14px; width: min(280px, 60vw); height: 8px;
  background: var(--pearl-2); border-radius: 99px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.15);
}
.loader-bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--pink), var(--teal));
  animation: load 1.7s ease forwards;
}
.loader-sub {
  font-family: var(--brand); letter-spacing: 3px; font-size: 14px;
  color: var(--pink); text-transform: uppercase; opacity: 0;
  animation: fadeUp .6s ease 1.3s forwards;
}

@keyframes loaderIn {
  0%   { filter: blur(8px) contrast(.5); transform: scale(1.8); opacity: 0; }
  45%  { filter: blur(4px) contrast(.7); transform: scale(1.35); opacity: 1; }
  70%  { filter: blur(1px) contrast(1);  transform: scale(1.05); }
  100% { filter: blur(0)   contrast(1);  transform: scale(1); text-shadow: var(--glow-pink); }
}
@keyframes load { to { width: 100% } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px) } to { opacity: .9; transform: none } }

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav-wrap {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 8000; width: min(900px, 92vw);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 12px 22px;
  background: rgba(247, 243, 238, .7);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255,255,255,.7);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.nav-brand {
  font-family: var(--brand); font-weight: 800; font-size: 22px; letter-spacing: 1px;
  display: flex; align-items: center; gap: 8px;
}
.nav-brand .nav-arrow { font-size: 20px; }
.nav-links { list-style: none; display: flex; gap: 6px; align-items: center; }
.nav-links a {
  font-family: var(--brand); font-weight: 600; font-size: 13px; letter-spacing: 1.5px;
  padding: 9px 15px; border-radius: 99px; transition: .25s; color: var(--dark);
}
.nav-links a:hover { background: var(--pink); color: #fff; box-shadow: var(--glow-pink); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; min-height: 100vh;
  display: grid; place-items: center; text-align: center;
  padding: 140px 20px 80px;
}
.hero-glow {
  position: absolute; width: 70vw; height: 70vw; max-width: 760px; max-height: 760px;
  left: 50%; top: 46%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,20,147,.22) 0%, rgba(0,217,217,.12) 45%, transparent 70%);
  filter: blur(20px); z-index: 0; pointer-events: none;
}
.hero-content { position: relative; z-index: 2; }
.hero-star {
  font-size: 26px; color: var(--pink); text-shadow: var(--glow-pink);
  animation: twinkle 3s ease-in-out infinite;
}
.hero-star.top { margin-bottom: 10px; }

.hero-logo {
  font-family: var(--brand); font-weight: 800;
  font-size: clamp(64px, 16vw, 200px); line-height: .9; letter-spacing: 2px;
  color: var(--dark);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: 0; transform: scale(1.3); filter: blur(6px);
}
.hero-logo.in { animation: heroIn 1.1s cubic-bezier(.16,.84,.34,1) forwards; }
.hl-arrow { font-size: .42em; filter: drop-shadow(var(--glow-pink)); }
.hl-word { text-shadow: 2px 2px 0 var(--pink), 4px 4px 0 var(--teal); }

.hero-tag {
  font-family: var(--brand); font-weight: 600; font-size: clamp(20px, 4vw, 34px);
  letter-spacing: 2px; margin-top: 18px; color: var(--pink);
  opacity: 0; transform: translateY(12px);
}
.hero-tag.in { animation: fadeUp .7s ease .5s forwards; }
.hero-lead {
  font-family: var(--brand); font-weight: 400; font-size: clamp(16px, 2.6vw, 22px);
  letter-spacing: 1px; margin-top: 12px; color: var(--dark);
  opacity: 0; transform: translateY(12px);
}
.hero-lead.in { animation: fadeUp .7s ease .7s forwards; }

.btn-main {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 34px;
  font-family: var(--brand); font-weight: 800; letter-spacing: 2px; font-size: 16px;
  color: #fff; padding: 16px 34px; border-radius: 99px;
  background: linear-gradient(135deg, var(--pink), var(--pink-soft));
  box-shadow: var(--glow-pink);
  opacity: 0; transform: translateY(12px);
  transition: transform .25s, box-shadow .25s;
}
.btn-main.in { animation: fadeUp .7s ease .9s forwards; }
.btn-main:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 60px rgba(255,20,147,.6); }
.btn-main.full { width: 100%; justify-content: center; margin-top: 8px; }
.btn-arrow { transition: transform .25s; }
.btn-main:hover .btn-arrow { transform: translateX(5px); }

.hero-scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--brand); font-size: 11px; letter-spacing: 3px; color: var(--dark);
  opacity: .55; z-index: 2;
}
.scroll-line { width: 2px; height: 40px; background: linear-gradient(var(--pink), transparent); animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100% { opacity: .3; transform: scaleY(.6) } 50% { opacity: 1; transform: scaleY(1) } }

/* =========================================================
   SECTION HEADERS
   ========================================================= */
.section-head { padding: 90px 20px 8px; max-width: 1100px; margin: 0 auto; }
.section-head.center { text-align: center; }
.kicker {
  font-family: var(--brand); font-weight: 600; letter-spacing: 3px; font-size: 13px;
  color: var(--pink); text-transform: uppercase;
}
.section-title {
  font-family: var(--brand); font-weight: 800; letter-spacing: 1px;
  font-size: clamp(34px, 6vw, 64px); margin-top: 8px; color: var(--dark);
}

/* =========================================================
   SERVICES — FESTIVAL POSTER CARDS
   ========================================================= */
.services { position: relative; z-index: 2; }
.posters {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  max-width: 1100px; margin: 40px auto 0; padding: 0 20px 40px;
}
.poster { perspective: 1000px; }
.poster-frame {
  position: relative; border-radius: var(--r-lg); padding: 38px 28px 30px;
  min-height: 360px; display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 2px solid var(--dark);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.5) 0 12px, rgba(255,255,255,.2) 12px 24px),
    var(--pearl);
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.16,.84,.34,1), box-shadow .35s;
}
.poster-frame::before {
  content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(22,22,22,.25); border-radius: 18px; pointer-events: none;
}
.poster:hover .poster-frame { transform: translateY(-10px) rotateX(6deg); box-shadow: 0 30px 70px rgba(255,20,147,.25); }
.poster.teal .poster-frame {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.6) 0 12px, rgba(0,217,217,.25) 12px 24px),
    #e6ffff;
  border-color: var(--teal);
}
.poster.dark .poster-frame {
  background: radial-gradient(circle at 50% 0%, #2a2a2a, var(--dark));
  border-color: var(--pink); color: var(--pearl);
}
.poster-icon {
  font-size: 56px; width: 96px; height: 96px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.6); border: 2px solid var(--dark);
  box-shadow: var(--glow-pink); margin-bottom: 20px;
}
.poster.dark .poster-icon { background: rgba(255,255,255,.08); border-color: var(--pink); }
.poster-title {
  font-family: var(--brand); font-weight: 800; font-size: 30px; letter-spacing: 2px; line-height: 1;
}
.poster-text { font-family: var(--brand); font-weight: 400; font-size: 16px; margin: 16px 0 auto; opacity: .85; }
.poster-enter {
  font-family: var(--brand); font-weight: 600; letter-spacing: 2px; font-size: 14px;
  margin-top: 22px; padding: 10px 22px; border-radius: 99px; border: 2px solid var(--dark);
  transition: .25s;
}
.poster-enter:hover { background: var(--pink); color: #fff; border-color: var(--pink); box-shadow: var(--glow-pink); }
.poster.dark .poster-enter { border-color: var(--pink); }
.poster.dark .poster-enter:hover { background: var(--pink); color: #fff; }

/* =========================================================
   PORTFOLIO — FESTIVAL LINEUP
   ========================================================= */
.projects { position: relative; z-index: 2; padding-bottom: 40px; }
.lineup { list-style: none; max-width: 1000px; margin: 40px auto 0; padding: 0 20px; }
.lineup-row {
  display: grid; grid-template-columns: 70px 1fr auto auto; align-items: center; gap: 20px;
  padding: 26px 22px; border-radius: var(--r-md);
  border: 1.5px solid rgba(22,22,22,.12);
  background: rgba(255,255,255,.45); backdrop-filter: blur(6px);
  margin-bottom: 14px; transition: .3s;
}
.lineup-row:hover { border-color: var(--pink); box-shadow: var(--glow-pink); transform: translateX(6px); }
.lineup-num { font-family: var(--brand); font-weight: 800; font-size: 34px; color: var(--pink); }
.lineup-name { font-family: var(--brand); font-weight: 600; font-size: clamp(20px, 3.4vw, 32px); letter-spacing: 1px; }
.lineup-tag {
  font-family: var(--brand); font-weight: 600; font-size: 12px; letter-spacing: 2px;
  padding: 6px 14px; border-radius: 99px; background: var(--teal); color: var(--dark);
}
.lineup-view {
  font-family: var(--brand); font-weight: 600; font-size: 13px; letter-spacing: 1.5px;
  white-space: nowrap; transition: .25s;
}
.lineup-view:hover { color: var(--pink); }

/* =========================================================
   ABOUT
   ========================================================= */
.about { position: relative; z-index: 2; padding: 60px 20px 80px; }
.about-inner {
  max-width: 1000px; margin: 0 auto; padding: 50px;
  border-radius: var(--r-lg); border: 2px solid var(--dark);
  background:
    radial-gradient(circle at 85% 15%, rgba(255,20,147,.18), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(0,217,217,.16), transparent 45%),
    var(--pearl);
  box-shadow: var(--shadow);
}
.about-grid { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; }
.about-logo {
  font-size: 80px; width: 150px; height: 150px; display: grid; place-items: center;
  border-radius: 50%; background: #fff; border: 2px solid var(--dark);
  box-shadow: var(--glow-pink);
}
.about-text p { max-width: 560px; margin-top: 14px; font-size: 18px; }
.about-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.about-tags span {
  font-family: var(--brand); font-weight: 600; font-size: 13px; letter-spacing: 1.5px;
  padding: 8px 16px; border-radius: 99px; border: 1.5px solid var(--dark);
}
.about-tags span:nth-child(2) { background: var(--teal); border-color: var(--teal); }
.about-tags span:nth-child(3) { background: var(--pink); color: #fff; border-color: var(--pink); }

/* =========================================================
   LOGIN PORTAL — CHROME GLASS
   ========================================================= */
.portal { position: relative; z-index: 2; padding: 40px 20px 100px; }
.portal-card {
  position: relative; max-width: 440px; margin: 0 auto; padding: 48px 38px;
  border-radius: var(--r-lg); text-align: center; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(218,218,218,.35));
  backdrop-filter: blur(20px); border: 1.5px solid rgba(255,255,255,.8);
  box-shadow: 0 30px 80px rgba(22,22,22,.18), inset 0 1px 0 rgba(255,255,255,.9);
}
.portal-glow {
  position: absolute; left: 50%; top: -40%; width: 120%; height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,20,147,.45), transparent 60%);
  filter: blur(30px); pointer-events: none;
}
.portal-arrow { position: relative; font-size: 40px; filter: drop-shadow(var(--glow-pink)); }
.portal-title {
  position: relative; font-family: var(--brand); font-weight: 800; font-size: 40px; letter-spacing: 2px;
  margin-top: 6px;
}
.portal-sub {
  position: relative; font-family: var(--brand); font-weight: 400; font-size: 18px;
  color: var(--pink); margin-bottom: 26px;
}
.portal-form { position: relative; display: flex; flex-direction: column; gap: 16px; }
.hidden { display: none !important; }

.portal-tabs {
  position: relative; display: flex; gap: 8px; justify-content: center;
  margin-bottom: 22px;
}
.ptab {
  font-family: var(--brand); font-weight: 600; font-size: 13px; letter-spacing: 2px;
  padding: 9px 22px; border-radius: 99px; cursor: pointer;
  border: 1.5px solid rgba(22,22,22,.2); background: rgba(255,255,255,.5);
  color: var(--dark); transition: .25s;
}
.ptab:hover { border-color: var(--pink); }
.ptab.active { background: var(--pink); color: #fff; border-color: var(--pink); box-shadow: var(--glow-pink); }
#recaptcha-container { margin-top: 6px; }
.field { position: relative; }
.field input, .field textarea {
  width: 100%; padding: 18px 18px 8px; font-family: var(--body); font-size: 15px;
  border-radius: var(--r-sm); border: 1.5px solid rgba(22,22,22,.25);
  background: rgba(255,255,255,.8); color: var(--dark); outline: none; transition: .25s;
  resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--pink); box-shadow: var(--glow-pink); background: #fff; }
.field-label {
  position: absolute; left: 18px; top: 15px; font-family: var(--brand); font-weight: 600;
  font-size: 12px; letter-spacing: 2px; color: rgba(22,22,22,.5); pointer-events: none;
  transition: .2s;
}
.field input:focus + .field-label,
.field input:not(:placeholder-shown) + .field-label,
.field textarea:focus + .field-label,
.field textarea:not(:placeholder-shown) + .field-label {
  top: 6px; font-size: 10px; color: var(--pink);
}
.portal-msg { font-family: var(--brand); font-size: 13px; letter-spacing: 1px; min-height: 18px; color: var(--pink); }
.portal-foot { position: relative; margin-top: 18px; font-size: 14px; }
.portal-foot a { color: var(--pink); font-family: var(--brand); font-weight: 600; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { position: relative; z-index: 2; padding: 40px 20px; border-top: 1.5px solid rgba(22,22,22,.1); background: var(--pearl-2); }
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.footer-brand { font-family: var(--brand); font-weight: 800; font-size: 22px; letter-spacing: 1px; }
.footer-tag { font-family: var(--brand); font-weight: 400; color: var(--pink); letter-spacing: 1px; }
.footer-copy { font-size: 13px; opacity: .6; }

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.reveal.show { opacity: 1; transform: none; }

/* =========================================================
   ANIMATED BG BLOBS
   ========================================================= */
.blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; filter: blur(60px); opacity: .5; }
.blob { position: absolute; border-radius: 50%; mix-blend-mode: multiply; }
.b1 { width: 440px; height: 440px; background: var(--pink); left: -8%; top: 6%; animation: blob1 19s ease-in-out infinite; }
.b2 { width: 380px; height: 380px; background: var(--teal); right: -6%; top: 28%; animation: blob2 23s ease-in-out infinite; }
.b3 { width: 320px; height: 320px; background: #ffd1ec; left: 28%; bottom: -8%; animation: blob3 27s ease-in-out infinite; }
@keyframes blob1 { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(14vw,10vh) scale(1.18) } }
@keyframes blob2 { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(-12vw,14vh) scale(1.12) } }
@keyframes blob3 { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(8vw,-12vh) scale(1.22) } }

/* =========================================================
   CUSTOM CURSOR
   ========================================================= */
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9500; transform: translate(-50%, -50%); will-change: transform; }
.cursor { width: 34px; height: 34px; border: 2px solid var(--pink); transition: width .22s, height .22s, background .22s, border-color .22s; }
.cursor-dot { width: 6px; height: 6px; background: var(--dark); z-index: 9501; }
.cursor.hover { width: 58px; height: 58px; background: rgba(255,20,147,.18); border-color: var(--teal); }
body.cursor-on, body.cursor-on a, body.cursor-on button { cursor: none; }
@media (hover: none) { .cursor, .cursor-dot { display: none !important; } }

/* =========================================================
   SCROLL PROGRESS
   ========================================================= */
.progress { position: fixed; top: 0; left: 0; height: 4px; width: 0%; z-index: 9600; background: linear-gradient(90deg, var(--pink), var(--teal)); box-shadow: var(--glow-pink); }

/* =========================================================
   MARQUEE TICKER
   ========================================================= */
.marquee { position: relative; z-index: 2; overflow: hidden; padding: 16px 0; background: rgba(255,255,255,.4); border-top: 1.5px solid rgba(22,22,22,.12); border-bottom: 1.5px solid rgba(22,22,22,.12); }
.marquee-track { display: flex; width: max-content; animation: marquee 24s linear infinite; }
.marquee-track span { font-family: var(--brand); font-weight: 800; font-size: 28px; letter-spacing: 2px; color: var(--dark); white-space: nowrap; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   HERO — TILT + GLITCH + GLOW PULSE
   ========================================================= */
.hero-content { transform-style: preserve-3d; transition: transform .2s ease-out; }
.hero-glow { animation: glowPulse 6s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { opacity: .8; transform: translate(-50%,-50%) scale(1) } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08) } }
@keyframes glitch {
  0%   { text-shadow: 2px 2px 0 var(--pink), 4px 4px 0 var(--teal); transform: none; }
  20%  { text-shadow: -3px 0 0 var(--teal), 3px 0 0 var(--pink); transform: translate(2px,0); }
  40%  { text-shadow: 3px -2px 0 var(--pink), -3px 2px 0 var(--teal); transform: translate(-2px,0); }
  60%  { text-shadow: -2px 2px 0 var(--teal), 2px -2px 0 var(--pink); transform: translate(1px,0); }
  100% { text-shadow: 2px 2px 0 var(--pink), 4px 4px 0 var(--teal); transform: none; }
}
.hero-logo.glitch .hl-word { animation: glitch .42s steps(2, end) 1; }

/* =========================================================
   POSTERS — 3D TILT + SHINE
   ========================================================= */
.poster-frame { position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform .18s ease-out, box-shadow .35s; }
.poster-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-130%);
}
.poster:hover .poster-frame::after { animation: shine 1s ease; }
@keyframes shine { to { transform: translateX(130%); } }

/* =========================================================
   MAGNETIC BUTTONS (transform set by JS)
   ========================================================= */
.btn-main, .poster-enter, .ptab, .lineup-view, .to-top { transition: transform .25s cubic-bezier(.16,.84,.34,1), box-shadow .25s, background .25s, color .25s, border-color .25s; }

/* =========================================================
   ABOUT — STATS
   ========================================================= */
.about-stats { display: flex; gap: 28px; margin-top: 28px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat-num { font-family: var(--brand); font-weight: 800; font-size: 42px; color: var(--pink); line-height: 1; }
.stat-label { font-family: var(--brand); font-weight: 400; font-size: 13px; letter-spacing: 2px; opacity: .7; margin-top: 4px; }

/* =========================================================
   BACK TO TOP
   ========================================================= */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 8000;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid var(--dark); background: var(--pearl); color: var(--dark);
  font-size: 22px; font-family: var(--brand); cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--pink); color: #fff; border-color: var(--pink); box-shadow: var(--glow-pink); transform: translateY(-4px); }

/* =========================================================
   NAV AUTO-HIDE
   ========================================================= */
.nav-wrap { transition: transform .4s cubic-bezier(.16,.84,.34,1); }
.nav-wrap.hide { transform: translate(-50%, -160%); }

/* =========================================================
   REVEAL STAGGER
   ========================================================= */
.poster:nth-child(2) { transition-delay: .12s; }
.poster:nth-child(3) { transition-delay: .24s; }
.lineup-row:nth-child(2) { transition-delay: .1s; }
.lineup-row:nth-child(3) { transition-delay: .2s; }

/* =========================================================
   SHARED CHROME (injected) + NEW PAGES
   ========================================================= */
body.locked { overflow: hidden; }

.nav-links a.active { background: var(--dark); color: #fff; }
.footer-links a { font-family: var(--brand); font-weight: 600; font-size: 12px; letter-spacing: 1.5px; color: var(--pink); }
.footer-links a:hover { text-shadow: var(--glow-pink); }

/* ---- Consent gate ---- */
.consent-overlay {
  position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; padding: 20px;
  background: rgba(22,22,22,.45); backdrop-filter: blur(8px);
  animation: fadeIn .4s ease;
}
.consent-overlay.hide { display: none; }
.consent-box {
  max-width: 520px; width: 100%; padding: 38px 34px; text-align: center; border-radius: var(--r-lg);
  border: 1.5px solid rgba(255,255,255,.8);
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(218,218,218,.4));
  backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(22,22,22,.3);
}
.consent-box h2 { font-family: var(--brand); font-weight: 800; font-size: 32px; letter-spacing: 2px; }
.consent-box p { margin: 12px 0; font-size: 15px; }
.consent-checks { text-align: left; margin: 18px 0; display: flex; flex-direction: column; gap: 12px; }
.consent-checks label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.consent-checks input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--pink); flex: none; }
.consent-checks a { color: var(--pink); font-family: var(--brand); font-weight: 600; }
.consent-note { font-size: 12px; margin-top: 16px; opacity: .75; letter-spacing: .5px; }
.btn-main:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none !important; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* ---- Page hero (inner pages) ---- */
.page-hero { position: relative; z-index: 2; text-align: center; padding: 160px 20px 50px; }
.page-hero .kicker { display: block; }
.page-hero h1 {
  font-family: var(--brand); font-weight: 800; letter-spacing: 2px; line-height: .95;
  font-size: clamp(48px, 11vw, 130px); margin-top: 8px;
  text-shadow: 2px 2px 0 var(--pink), 4px 4px 0 var(--teal);
}
.page-hero p { font-family: var(--brand); font-weight: 400; font-size: clamp(16px, 2.6vw, 22px); margin-top: 14px; }

/* ---- Detail cards (services / projects) ---- */
.detail { max-width: 1000px; margin: 10px auto 60px; padding: 0 20px; }
.detail-card {
  display: grid; grid-template-columns: 130px 1fr; gap: 30px; align-items: center;
  border: 2px solid var(--dark); border-radius: var(--r-lg); padding: 34px; margin-bottom: 22px;
  background: var(--pearl); box-shadow: var(--shadow);
}
.detail-card .dc-icon {
  font-size: 54px; width: 110px; height: 110px; display: grid; place-items: center;
  border-radius: 50%; background: #fff; border: 2px solid var(--dark); box-shadow: var(--glow-pink);
}
.detail-card h2 { font-family: var(--brand); font-weight: 800; font-size: 34px; letter-spacing: 1px; }
.detail-card p { margin-top: 10px; font-size: 17px; }
.feature-list { list-style: none; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; }
.feature-list li {
  font-family: var(--brand); font-weight: 600; font-size: 13px; letter-spacing: 1px;
  padding: 7px 14px; border-radius: 99px; border: 1.5px solid var(--dark);
}
.detail-card.teal { border-color: var(--teal); background: #e6ffff; }
.detail-card.teal .feature-list li { background: var(--teal); border-color: var(--teal); }
.detail-card.dark { border-color: var(--pink); background: radial-gradient(circle at 80% 0%, #2a2a2a, var(--dark)); color: var(--pearl); }
.detail-card.dark .dc-icon { background: rgba(255,255,255,.08); border-color: var(--pink); }
.detail-card.dark .feature-list li { border-color: var(--pink); }

/* ---- Legal article ---- */
.legal { max-width: 820px; margin: 10px auto 80px; padding: 0 20px; }
.legal article {
  background: rgba(255,255,255,.55); border: 1.5px solid rgba(22,22,22,.12);
  border-radius: var(--r-lg); padding: 42px; box-shadow: var(--shadow);
}
.legal h2 { font-family: var(--brand); font-weight: 800; font-size: 24px; margin: 26px 0 10px; letter-spacing: 1px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; margin-bottom: 10px; }
.legal ul { padding-left: 22px; }

/* ---- Contact / Auth ---- */
.auth-card { max-width: 460px; margin: 10px auto 90px; }
.auth-note { font-size: 12px; margin-top: 16px; text-align: center; opacity: .8; letter-spacing: .5px; }
.auth-switch { margin-top: 14px; text-align: center; font-size: 14px; }
.auth-switch button { background: none; border: none; color: var(--pink); font-family: var(--brand); font-weight: 600; cursor: pointer; font-size: 14px; }
.contact-gate { text-align: center; }
.contact-gate .portal-icon { font-size: 44px; filter: drop-shadow(var(--glow-pink)); }
.privacy-note {
  font-size: 13px; text-align: center; margin-top: 16px; padding: 12px;
  border: 1.5px dashed rgba(22,22,22,.25); border-radius: var(--r-sm); opacity: .85;
}

/* ---- 404 ---- */
.err { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 120px 20px; position: relative; z-index: 2; }
.err h1 { font-family: var(--brand); font-weight: 800; font-size: clamp(80px, 22vw, 240px); line-height: .9; text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 var(--teal); }
.err p { font-family: var(--brand); font-weight: 400; font-size: 20px; margin: 16px 0 30px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--brand); font-weight: 600;
  letter-spacing: 2px; font-size: 14px; padding: 14px 28px; border-radius: 99px;
  border: 2px solid var(--dark); color: var(--dark); transition: .25s;
}
.btn-ghost:hover { background: var(--dark); color: #fff; }

/* ---- Responsive additions ---- */
@media (max-width: 860px) {
  .detail-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .footer-links { width: 100%; text-align: center; }
}

/* =========================================================
   LOGO MARK (SVG)
   ========================================================= */
.logo-mark { display: block; }
.nav-logo { height: 24px; width: auto; filter: drop-shadow(0 1px 2px rgba(22,22,22,.2)); }
.hero-mark { height: clamp(86px, 17vw, 190px); width: auto; margin: 0 auto 6px; filter: drop-shadow(0 10px 26px rgba(255,20,147,.35)); }
.about-logo-img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(255,20,147,.3)); }
.portal-logo { height: 46px; width: auto; margin: 0 auto 2px; filter: drop-shadow(0 6px 16px rgba(255,20,147,.3)); }
.loader-logo-img { height: 64px; width: auto; }
.foot-logo { height: 22px; width: auto; }

/* =========================================================
   ARROW ARCADE (Pac-Man easter egg)
   ========================================================= */
body.arcade { background: #0a0a0f; color: var(--pearl); }
.arcade-hero .kicker { color: var(--teal); }
.arcade-title {
  color: #FFE600; letter-spacing: 3px;
  text-shadow: 0 0 18px rgba(255,230,0,.55), 3px 3px 0 var(--pink);
}
.arcade-sub { color: var(--teal); }
.arcade-stage { position: relative; z-index: 2; text-align: center; padding: 10px 20px 90px; }
#pacman {
  width: 380px; max-width: 92vw; margin: 14px auto 0; border-radius: 10px;
  box-shadow: 0 0 50px rgba(255,20,147,.25), 0 0 50px rgba(0,217,217,.18);
  overflow: hidden;
}
#shim { position: absolute; visibility: hidden; }
.arcade-help {
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  margin-top: 18px; font-family: var(--brand); font-weight: 600; letter-spacing: 1px; font-size: 14px;
}
.arcade-help b { color: var(--pink); }
.arcade-credit { margin-top: 14px; font-size: 13px; opacity: .7; }
.arcade-credit a { color: var(--teal); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
  .posters { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .about-text p { margin-left: auto; margin-right: auto; }
  .lineup-row { grid-template-columns: 50px 1fr; row-gap: 8px; }
  .lineup-tag, .lineup-view { grid-column: 2; justify-self: start; }
  .nav-links a { padding: 8px 10px; font-size: 11px; }
}
@media (max-width: 520px) {
  .nav-brand { font-size: 18px; }
  .nav-links { gap: 2px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-logo, .hero-tag, .hero-lead, .btn-main { opacity: 1 !important; transform: none !important; filter: none !important; }
}