/* ==========================================================================
   Cinematic intro
   Logo piece geometry comes from the official logo (assets/logo/logo.png,
   895×252): words TÓ | JE | TÓ split at 33.8% / 65.9% of the width, the
   main line ends at 71.8% of the height, STUDIO row lines end at 20.4% / 80.6%.
   ========================================================================== */
.intro { display: none; }
.has-intro .intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
  overflow: hidden;
  background: #000;
  color: var(--text);
}
.intro[hidden] { display: none !important; }

.intro.is-leaving { opacity: 0; visibility: hidden; transition: opacity 1s var(--ease-io) 0.05s, visibility 0s linear 1.05s; }
.intro.is-leaving.is-skipped { transition: opacity 0.5s var(--ease-io), visibility 0s linear 0.5s; }

.intro__grain {
  position: absolute;
  inset: -4rem;
  background-image: var(--noise);
  background-size: 220px;
  opacity: 0;
  transition: opacity 1.8s var(--ease) 0.3s;
  animation: grain 1s steps(5) infinite;
  pointer-events: none;
}
.intro.is-gate .intro__grain { opacity: 0.05; }
.intro.is-playing .intro__grain { opacity: 0.13; }

.intro__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 120vmin;
  height: 70vmin;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03) 50%, transparent 76%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 3s var(--ease) 0.6s, transform 5s var(--ease) 0.6s;
  pointer-events: none;
}
.intro.is-playing .intro__glow { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* chrome: top + bottom rows */
.intro__top,
.intro__bottom {
  position: absolute;
  left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--gutter);
  opacity: 0;
  animation: fadeIn 1.2s var(--ease) 0.3s forwards;
}
.intro__top { top: 0; padding-block: calc(1rem + env(safe-area-inset-top)) 1rem; }
.intro__bottom { bottom: 0; padding-block: 1rem calc(1.25rem + env(safe-area-inset-bottom)); animation-delay: 0.8s; }
.intro__corner { color: var(--text-3); }
.intro.is-playing .intro__top .lang-switch { opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s linear 0.5s; }
.intro.is-short .intro__top { display: none; }

.intro__timecode { min-width: 8.5rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.intro__progress { position: relative; flex: 1; max-width: 240px; height: 1px; margin-inline: auto; overflow: hidden; background: var(--line-2); }
.intro__progress i { position: absolute; inset: 0; background: var(--text); transform: scaleX(0); transform-origin: left; }
.intro.is-playing .intro__progress i { animation: introProgress 6.1s linear forwards; }
.intro.is-playing.is-short .intro__progress i { animation-duration: 1.75s; }
.intro.is-playing.is-reduced:not(.is-short) .intro__progress i { animation-duration: 2.2s; }

.intro__skip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}
.intro__skip svg { width: 12px; height: 12px; }
.intro__skip:hover { border-color: var(--text); background: var(--text); color: #000; }

/* gate */
.intro__gate {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: var(--gutter);
  text-align: center;
}
.intro.is-short .intro__gate { display: none; }

.intro__enter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  padding: 0 clamp(1.75rem, 5vw, 3rem);
  border: 1px solid rgba(255, 255, 255, 0.22);
  isolation: isolate;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  opacity: 0;
  animation: enterIn 1.8s var(--ease) 0.5s forwards;
  transition: border-color 0.6s var(--ease), letter-spacing 0.8s var(--ease), text-indent 0.8s var(--ease);
}
.intro__enter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  background-position: 150% 0;
  transition: background-position 1.3s var(--ease);
}
.intro__enter:hover,
.intro__enter:focus-visible { border-color: rgba(255, 255, 255, 0.65); letter-spacing: 0.38em; text-indent: 0.38em; }
.intro__enter:hover::before,
.intro__enter:focus-visible::before { background-position: -50% 0; }
.intro__enter-tick { position: absolute; width: 10px; height: 10px; border: solid var(--text); transition: transform 0.6s var(--ease); }
.intro__enter-tick--tl { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.intro__enter-tick--br { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.intro__enter:hover .intro__enter-tick--tl { transform: translate(-5px, -5px); }
.intro__enter:hover .intro__enter-tick--br { transform: translate(5px, 5px); }

.intro__tagline { color: var(--text-3); letter-spacing: 0.2em; opacity: 0; animation: fadeIn 1.4s var(--ease) 1.1s forwards; }

.intro.is-playing .intro__gate {
  opacity: 0;
  visibility: hidden;
  filter: blur(4px);
  transform: scale(0.98);
  transition: opacity 0.7s var(--ease), filter 0.7s, transform 0.9s var(--ease), visibility 0s linear 0.9s;
}

/* logo */
.intro-logo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  pointer-events: none;
  transition: opacity 0.9s var(--ease-io), transform 1.1s var(--ease-io), filter 0.9s;
}
.intro.is-leaving .intro-logo { opacity: 0; transform: scale(0.975); filter: blur(6px); }

.intro-logo__stage { position: relative; width: min(80vw, 760px); aspect-ratio: 895 / 252; opacity: 0; }
.intro.is-playing .intro-logo__stage { opacity: 1; animation: stageIn 4.6s var(--ease) 0.8s both; }

.intro-logo__piece,
.intro-logo__sweep { position: absolute; inset: 0; display: block; }
.intro-logo__piece img,
.intro-logo__sweep img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; }

.intro-logo__piece--w1 { clip-path: inset(0 66.2% 28.2% 0); }
.intro-logo__piece--w2 { clip-path: inset(0 34.1% 28.2% 33.8%); }
.intro-logo__piece--w3 { clip-path: inset(0 0 28.2% 65.9%); }
.intro-logo__piece--studio { clip-path: inset(71.8% 19.4% 0 20.4%); }
.intro-logo__piece--line-l { clip-path: inset(71.8% 79.6% 0 20.4%); }
.intro-logo__piece--line-r { clip-path: inset(71.8% 19.4% 0 80.6%); }

.intro-logo__piece img { opacity: 0; filter: blur(14px) brightness(0.72); }
.intro-logo__piece--line-l img,
.intro-logo__piece--line-r img { opacity: 1; filter: brightness(0.72); }

.intro-logo__sweep { clip-path: inset(0 0 28.2% 0); opacity: 0; }
.intro-logo__sweep img {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.55));
  -webkit-mask-image: linear-gradient(100deg, transparent 42%, #000 50%, transparent 58%);
  mask-image: linear-gradient(100deg, transparent 42%, #000 50%, transparent 58%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

/* full sequence */
.intro.is-playing .intro-logo__piece--w1 img { animation: wordIn 1.7s var(--ease) 1s both, brighten 1s var(--ease-io) 4s forwards; }
.intro.is-playing .intro-logo__piece--w2 img { animation: wordIn 1.7s var(--ease) 1.2s both, brighten 1s var(--ease-io) 4s forwards; }
.intro.is-playing .intro-logo__piece--w3 img { animation: wordIn 1.7s var(--ease) 1.4s both, brighten 1s var(--ease-io) 4s forwards; }
.intro.is-playing .intro-logo__piece--studio img { animation: studioIn 1.6s var(--ease) 2.6s both, brighten 1s var(--ease-io) 4s forwards; }
.intro.is-playing .intro-logo__piece--line-l { animation: lineL 1.5s var(--ease) 2.9s both; }
.intro.is-playing .intro-logo__piece--line-r { animation: lineR 1.5s var(--ease) 2.9s both; }
.intro.is-playing .intro-logo__piece--line-l img,
.intro.is-playing .intro-logo__piece--line-r img { animation: brighten 1s var(--ease-io) 4s forwards; }
.intro.is-playing .intro-logo__sweep { animation: sweepShow 1.5s linear 3s both; }
.intro.is-playing .intro-logo__sweep img { animation: sweepMove 1.5s var(--ease-io) 3s both; }

/* short sequence (return visits) */
.intro.is-short.is-playing .intro-logo__stage { animation: stageIn 1.8s var(--ease) both; }
.intro.is-short.is-playing .intro-logo__piece--w1 img { animation: wordIn 0.9s var(--ease) 0.05s both, brighten 0.5s var(--ease-io) 0.9s forwards; }
.intro.is-short.is-playing .intro-logo__piece--w2 img { animation: wordIn 0.9s var(--ease) 0.12s both, brighten 0.5s var(--ease-io) 0.9s forwards; }
.intro.is-short.is-playing .intro-logo__piece--w3 img { animation: wordIn 0.9s var(--ease) 0.19s both, brighten 0.5s var(--ease-io) 0.9s forwards; }
.intro.is-short.is-playing .intro-logo__piece--studio img { animation: studioIn 0.8s var(--ease) 0.35s both, brighten 0.5s var(--ease-io) 0.9s forwards; }
.intro.is-short.is-playing .intro-logo__piece--line-l { animation: lineL 0.9s var(--ease) 0.4s both; }
.intro.is-short.is-playing .intro-logo__piece--line-r { animation: lineR 0.9s var(--ease) 0.4s both; }
.intro.is-short.is-playing .intro-logo__piece--line-l img,
.intro.is-short.is-playing .intro-logo__piece--line-r img { animation: brighten 0.5s var(--ease-io) 0.9s forwards; }
.intro.is-short.is-playing .intro-logo__sweep { animation: sweepShow 0.9s linear 0.55s both; }
.intro.is-short.is-playing .intro-logo__sweep img { animation: sweepMove 0.9s var(--ease-io) 0.55s both; }

/* reduced motion: a quiet fade, no movement, blur or light sweep */
.intro.is-reduced .intro-logo__stage { animation: none !important; transform: none; }
.intro.is-reduced .intro-logo__piece img { animation: fadeOnly 0.8s ease 0.15s both !important; filter: none; transform: none; }
.intro.is-reduced .intro-logo__piece--line-l { animation: none !important; clip-path: inset(71.8% 79.6% 0 0); }
.intro.is-reduced .intro-logo__piece--line-r { animation: none !important; clip-path: inset(71.8% 0 0 80.6%); }
.intro.is-reduced .intro-logo__sweep { display: none; }
.intro.is-reduced .intro__glow { transition-duration: 0.8s; transform: translate(-50%, -50%); }

@keyframes enterIn {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes stageIn { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes wordIn {
  from { opacity: 0; transform: translateY(75%); filter: blur(14px) brightness(0.72); }
  55% { opacity: 1; }
  to { opacity: 1; transform: none; filter: blur(0) brightness(0.72); }
}
@keyframes studioIn {
  from { opacity: 0; transform: scale(1.08); transform-origin: 50% 88%; filter: blur(10px) brightness(0.72); }
  to { opacity: 1; transform: none; transform-origin: 50% 88%; filter: blur(0) brightness(0.72); }
}
@keyframes brighten { from { filter: blur(0) brightness(0.72); } to { filter: blur(0) brightness(1); } }
@keyframes lineL { from { clip-path: inset(71.8% 79.6% 0 20.4%); } to { clip-path: inset(71.8% 79.6% 0 0); } }
@keyframes lineR { from { clip-path: inset(71.8% 19.4% 0 80.6%); } to { clip-path: inset(71.8% 0 0 80.6%); } }
@keyframes sweepShow { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sweepMove {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
@keyframes introProgress { to { transform: scaleX(1); } }
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }