/* story */

.story {
  position: relative;
  height: var(--story-length);
  background: var(--stage-bg, #efe9df);
}

.stage {
  --stage-bg: #efe9df;
  --fx: 0px; --fy: 0px; --fw: 100vw; --fh: 56.25vw;
  --glow: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--stage-bg);
  transition: background-color 0.8s var(--ease-out);
  contain: layout paint;
}
.theme-film-dark .stage { --stage-bg: #121110; }

/* --- Frame (video + zemin) --------------------------------------------- */
.frame {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: var(--fw);
  height: var(--fh);
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.frame video,
.frame picture,
.frame .frame__zemin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.frame video { background: transparent; transition: opacity 0.25s linear; }
.frame__zemin { z-index: 2; will-change: opacity; }

/* Dikey ekranlarda frame ekranın ortasında; üst/alt kenarlar zemine erir */
.stage.is-portrait .frame {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* --- Chapters ------------------------------------------------------------ */
.chapters {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  --gold-text: var(--gold-ink);
}

.chapter {
  position: absolute;
  top: 50%;
  width: min(40rem, 44vw);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -50%, 0);
  transition: opacity 0.7s var(--ease-out), filter 0.7s var(--ease-out), transform 0.7s var(--ease-out), visibility 0s linear 0.7s;
  overflow: visible;
}
.chapter--left { left: var(--edge); text-align: left; --sx: -0.7em; }
.chapter--right { right: var(--edge); text-align: right; --sx: 0.7em; }

.chapter.is-in {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease-out), filter 0.4s, transform 0.4s, visibility 0s;
}
.chapter.is-out {
  opacity: 0;
  visibility: hidden;
  filter: blur(10px);
  transform: translate3d(0, calc(-50% - 1.25rem), 0);
}

/* Okunabilirlik için yumuşak krem ışık (cam kutu değil) */
.chapter__scrim {
  position: absolute;
  inset: -45% -40%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(239, 233, 223, 0.86) 0%, rgba(239, 233, 223, 0.55) 45%, rgba(239, 233, 223, 0) 100%);
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.chapter.is-in .chapter__scrim { opacity: 1; }
.chapter.is-strong .chapter__scrim {
  inset: -55% -45%;
  background: radial-gradient(closest-side, rgba(239, 233, 223, 0.95) 0%, rgba(239, 233, 223, 0.8) 50%, rgba(239, 233, 223, 0) 100%);
}

.chapter__eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: clamp(0.75rem, 1.4vw, 1.25rem);
  font-size: clamp(0.60rem, 0.68vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--gold-600);
}
.chapter__no { color: var(--gold-500); }
.chapter__sep { opacity: 0.45; }

/* Kenardan büyüyen altın çizgi */
.chapter__line {
  position: absolute;
  top: 50%;
  height: 1px;
  width: calc(var(--edge) - 0.9rem);
  background: linear-gradient(90deg, rgba(201, 154, 75, 0), var(--gold-400) 70%, var(--gold-200));
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-out);
}
.chapter--left .chapter__line { right: calc(100% + 0.9rem); transform-origin: 0% 50%; }
.chapter--right .chapter__line { left: calc(100% + 0.9rem); transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(201, 154, 75, 0), var(--gold-400) 70%, var(--gold-200)); }
.chapter.is-in .chapter__line,
.chapter.is-out .chapter__line { transform: scaleX(1); }

.chapter__eyebrow .fx-sub { --sub-delay: 0.15s; }

.chapter__title {
  font-size: clamp(2rem, 3.6vw, 3.9rem);
  font-weight: 300;
  line-height: 1.10;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
  padding-bottom: 0.1em;
  margin-bottom: 0;
  overflow: visible;
}
.chapter__sub {
  max-width: 30rem;
  margin-top: clamp(0.42rem, 0.75vw, 0.75rem);
  font-size: clamp(0.95rem, 1.05vw, 1.12rem);
  line-height: 1.55;
  color: var(--gray-1);
  overflow: visible;
}
.chapter--right .chapter__sub { margin-left: auto; }

/* --- Final screen (skiper86 — Apple Intelligence tarzı ışıltı, altın) --- */
@property --spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.final {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: var(--glow, 0);
  transition: opacity 0.5s ease-out;
}

/* Siri / Apple Intelligence edge aura — yalnızca dikdörtgen çerçevenin çevresinde.
   Halka maskesi sayesinde merkez her zaman saf siyah kalır. */
.siri-edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: blur(var(--bl, 0px));
  opacity: var(--op, 1);
}
.siri-edge > i {
  position: absolute;
  inset: 0;
  padding: var(--rw, 2px);
  background: conic-gradient(
    from var(--spin),
    #9be7ff 0%,
    #b8b5ff 16%,
    #f3b4e4 32%,
    #ffc9a8 48%,
    #f6e2a8 58%,
    #a8f0d8 74%,
    #9fc8ff 88%,
    #9be7ff 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: siriSpin var(--dur, 8s) linear infinite var(--dir, normal);
}
.siri-edge--thin { --rw: 2px;  --bl: 1px;  --dur: 7s;  --op: 0.85; }
.siri-edge--mid  { --rw: 9px;  --bl: 10px; --dur: 9s;  --op: 0.6;  --dir: reverse; }
.siri-edge--wide { --rw: 26px; --bl: 34px; --dur: 12s; --op: 0.45; }

@keyframes siriSpin { to { --spin: 360deg; } }

/* (legacy) */
.siri-glow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(140px, 20vw, 360px);
  pointer-events: none;
  overflow: hidden;
}

.siri-glow--left {
  left: 0;
}

.siri-glow--right {
  right: 0;
}

.siri-glow__aura {
  position: absolute;
  inset: -15% -25%;
  filter: blur(52px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.siri-glow--left .siri-glow__aura {
  background: radial-gradient(
    ellipse at 0% 50%,
    rgba(0, 245, 255, 0.45) 0%,
    rgba(139, 92, 246, 0.40) 28%,
    rgba(244, 63, 94, 0.32) 52%,
    rgba(59, 130, 246, 0.20) 70%,
    transparent 88%
  );
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 35%, transparent 100%);
  animation: siriFloatLeft 9s ease-in-out infinite alternate;
}

.siri-glow--right .siri-glow__aura {
  background: radial-gradient(
    ellipse at 100% 50%,
    rgba(244, 63, 94, 0.45) 0%,
    rgba(168, 85, 247, 0.40) 28%,
    rgba(0, 245, 255, 0.32) 52%,
    rgba(245, 158, 11, 0.18) 70%,
    transparent 88%
  );
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, #000 35%, transparent 100%);
  animation: siriFloatRight 9s ease-in-out infinite alternate;
}

@keyframes siriFloatLeft {
  0% { transform: translateY(-4%) scaleY(0.95); opacity: 0.82; }
  50% { transform: translateY(4%) scaleY(1.06); opacity: 1; }
  100% { transform: translateY(-2%) scaleY(0.98); opacity: 0.88; }
}

@keyframes siriFloatRight {
  0% { transform: translateY(4%) scaleY(1.05); opacity: 0.85; }
  50% { transform: translateY(-4%) scaleY(0.96); opacity: 1; }
  100% { transform: translateY(2%) scaleY(1.02); opacity: 0.90; }
}

/* --- Final Content (Chapter 07 - Modernized, No buttons, No 07/GELECEK) --- */
.final-content {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: calc(var(--fy) + var(--fh) * 0.665);
  width: min(94vw, 64rem);
  transform: translateX(-50%);
  text-align: center;
  color: var(--white);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-out), visibility 0s linear 0.6s, filter 0.6s;
}
.final-content.is-in { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.4s, visibility 0s; }
.final-content.is-out { opacity: 0; filter: blur(8px); }

.final-content__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-content__title {
  font-size: clamp(1.5rem, 2.35vw, 2.7rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
  margin: 0;
  padding: 0;
}

/* Baskın renkli "iziniz" / accent */
.final-content__title .w.is-accent .u,
.final-content__title .is-accent {
  background: linear-gradient(135deg, #fff2cc 0%, #e2b76e 38%, #c49a56 75%, #ffd88a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 600 !important;
  text-shadow: 0 0 28px rgba(226, 183, 110, 0.45);
}

.final-content__sub {
  font-size: clamp(0.95rem, 1.35vw, 1.22rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 0.65rem;
  margin-bottom: 0.95rem;
  line-height: 1.4;
}

.final-content__desc {
  font-size: clamp(0.86rem, 1.05vw, 1.02rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(241, 245, 249, 0.72);
  margin: 1rem auto 1.4rem;
  max-width: none;
  white-space: nowrap;
}
.final-content__desc .falling-word { display: inline-block; white-space: pre; }
/* Vurgulu fiiller: bulunun · keşfedilin · yerinizi alın */
.final-content__desc .is-em {
  font-weight: 600;
  color: #fff6e3;
  background: linear-gradient(135deg, #fff2cc 0%, #e2b76e 55%, #c49a56 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 760px) {
  .final-content__desc { white-space: normal; }
}

.final-content__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.final-content__tags li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.48rem 1.05rem;
  border-radius: 999px;
  font-size: clamp(0.78rem, 0.9vw, 0.86rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  user-select: none;
  cursor: default;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.final-content__tags li:hover {
  border-color: rgba(226, 183, 110, 0.6);
  transform: translateY(-2px);
}

/* --- HUD (bölüm etiketi + elastic slider) -------------------------------- */
.hud {
  position: absolute;
  z-index: 7;
  left: var(--edge);
  right: var(--edge);
  bottom: clamp(1rem, 3.2vh, 2rem);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  color: var(--gray-1);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.6s;
}
.hud.is-on { opacity: 1; transform: none; pointer-events: auto; }
.theme-film-dark .hud { color: rgba(255, 253, 249, 0.78); }

/* --- ReactBits Shuffle Text Animation (Bölüm Yazıları) ------------------- */
.hud__chapter {
  display: inline-flex;
  align-items: center;
  user-select: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease-spring);
}
.hud__chapter:hover {
  transform: translateY(-1px);
}

.hud__chapter-text {
  display: inline-block;
  font-family: var(--font, 'Manrope', -apple-system, sans-serif);
  font-size: clamp(0.62rem, 0.70vw, 0.80rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: currentColor;
  min-width: 5.5rem;
  text-align: right;
  transition: color 0.3s ease;
}

/* --- HUD Drawer (Collapsible Scrubber on right) ------------------------- */
.hud__drawer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.hud__toggle {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(239, 233, 223, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(196, 154, 86, 0.3);
  box-shadow: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.25s var(--ease-spring);
}

.theme-film-dark .hud__toggle {
  background: rgba(18, 17, 16, 0.55);
  border-color: rgba(196, 154, 86, 0.35);
  color: var(--white);
}

.hud__toggle:hover {
  border-color: rgba(196, 154, 86, 0.75);
  background: rgba(244, 237, 216, 0.85);
  color: var(--ink);
  transform: scale(1.08);
}

.theme-film-dark .hud__toggle:hover {
  background: rgba(35, 33, 30, 0.85);
  color: #ffffff;
}

.hud__toggle .ai,
.hud__toggle svg,
.hud__toggle i {
  display: block;
  transition: transform 0.35s var(--ease-spring);
}

.hud__drawer.is-open .hud__toggle .ai,
.hud__drawer.is-open .hud__toggle svg,
.hud__drawer.is-open .hud__toggle i {
  transform: rotate(180deg);
}

/* Scrubber Slider — Collapsible animation */
.hud .eslider {
  width: min(15.5rem, 30vw);
  border-radius: 999px;
  background: rgba(239, 233, 223, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(196, 154, 86, 0.25);
  transition: max-width 0.45s var(--ease-out), opacity 0.35s ease, transform 0.45s var(--ease-out), padding 0.45s var(--ease-out), border-color 0.3s ease, background 0.6s;
}
.theme-film-dark .hud .eslider { background: rgba(18, 17, 16, 0.42); }

.hud__drawer .eslider {
  max-width: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  border-color: transparent;
  transform: translateX(18px) scale(0.96);
}

.hud__drawer.is-open .eslider {
  max-width: min(15.5rem, 30vw);
  opacity: 1;
  padding: 0.35rem 0.95rem;
  overflow: visible;
  pointer-events: auto;
  border-color: rgba(196, 154, 86, 0.25);
  transform: none;
}

.hud .eslider__icon .ai { width: 16px; height: 16px; }

/* --- OptionWheel (Chapter 05 / Services on laptop display) ------------- */
.story-wheel {
  position: absolute;
  left: max(2rem, calc(var(--fx) + var(--fw) * 0.228));
  top: calc(var(--fy) + var(--fh) * 0.22);
  width: min(calc(var(--fw) * 0.125), 15rem);
  height: calc(var(--fh) * 0.50);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0.45s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-wheel.is-active {
  opacity: 1;
  visibility: visible;
}

.ow-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font, 'Manrope', sans-serif);
  font-size: clamp(0.60rem, 0.70vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-600, #855F23);
  margin-bottom: 0.85rem;
  padding-left: 0.25rem;
  pointer-events: none;
  user-select: none;
}

.ow-badge__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-varak, #C49A56);
  box-shadow: 0 0 8px rgba(196, 154, 86, 0.85);
  animation: owDotPulse 2.2s ease-in-out infinite;
}

@keyframes owDotPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 12px rgba(196, 154, 86, 1); }
}

.ow-track {
  position: relative;
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  pointer-events: none;
  user-select: none;
}

.ow-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 28px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, transparent, var(--gold-varak, #C49A56) 20%, #F4EDD8 50%, var(--gold-varak, #C49A56) 80%, transparent);
  border-radius: 2px;
  opacity: 1;
  box-shadow: 0 0 10px rgba(196, 154, 86, 0.7);
}

.ow-list {
  position: relative;
  width: 100%;
  height: 100%;
}

.ow-item {
  position: absolute;
  top: 50%;
  left: 20px;
  white-space: nowrap;
  font-family: var(--font, 'Manrope', -apple-system, sans-serif);
  font-size: clamp(0.70rem, 0.78vw, 0.90rem);
  line-height: 1.25;
  font-weight: 350;
  letter-spacing: -0.025em;
  transform-origin: left center;
  will-change: transform, opacity, filter;
  color: color-mix(in srgb, #141311 calc(var(--ow-p, 0) * 100%), rgba(50, 44, 38, 0.40));
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  transition: color 0.25s ease;
  pointer-events: none;
  user-select: none;
}

/* Varak (altın yaldız) renkli anahtar kelimeler: Web, Sosyal Medya, E-Ticaret, Google */
.ow-gold {
  color: var(--gold-varak, #C49A56);
  font-weight: 550;
  letter-spacing: -0.02em;
  transition: color 0.25s ease, filter 0.25s ease;
}

.ow-rest {
  font-weight: 350;
  color: inherit;
  letter-spacing: -0.025em;
}

.ow-item__bullet {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-varak, #C49A56);
  opacity: calc(0.35 + var(--ow-p, 0) * 0.65);
  box-shadow: 0 0 6px rgba(196, 154, 86, 0.6);
  transition: transform 0.25s var(--ease-spring), opacity 0.25s ease, box-shadow 0.25s ease;
}

.ow-item.is-selected {
  color: #12100e;
}

.ow-item.is-selected .ow-item__bullet {
  transform: scale(1.35);
  box-shadow: 0 0 12px rgba(196, 154, 86, 0.95);
}

.ow-item.is-selected .ow-gold {
  color: #B2833A;
  background: linear-gradient(135deg, #E2BF7D 0%, #C49A56 45%, #9C7232 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(196, 154, 86, 0.35));
  font-weight: 650;
}

.ow-item.is-selected .ow-rest {
  color: #141311;
  font-weight: 450;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .chapter { width: min(30rem, 44vw); }
}

.stage.is-portrait .chapter {
  top: auto;
  bottom: calc(clamp(4.5rem, 11vh, 6.5rem) + env(safe-area-inset-bottom));
  left: var(--edge);
  right: var(--edge);
  width: auto;
  text-align: left;
  transform: none;
  --sx: -0.5em;
}
.stage.is-portrait .chapter.is-out { transform: translate3d(0, -1rem, 0); }
.stage.is-portrait .chapter--right .chapter__line { left: auto; right: calc(100% + 0.9rem); transform-origin: 0% 50%; background: linear-gradient(90deg, rgba(201, 154, 75, 0), var(--gold-400) 70%, var(--gold-200)); }
.stage.is-portrait .chapter--right .chapter__sub { margin-left: 0; }
.stage.is-portrait .chapter__scrim {
  inset: -60% -20% -40%;
  background: linear-gradient(0deg, rgba(239, 233, 223, 0.95) 30%, rgba(239, 233, 223, 0.7) 60%, rgba(239, 233, 223, 0) 100%);
}
.stage.is-portrait .chapter__title { font-size: clamp(1.75rem, 7.4vw, 2.6rem); }
.stage.is-portrait .chapter__sub { font-size: 0.95rem; }

.stage.is-portrait .final-content { top: auto; bottom: calc(clamp(5rem, 12vh, 7rem) + env(safe-area-inset-bottom)); }

.stage.is-portrait .story-wheel {
  left: max(0.85rem, calc(var(--fx) + var(--fw) * 0.16));
  top: calc(var(--fy) + var(--fh) * 0.22);
  width: min(calc(var(--fw) * 0.24), 13rem);
  height: calc(var(--fh) * 0.52);
}

@media (max-width: 640px) {
  .hud { gap: 1rem; }
  .hud__chapter::before { display: none; }
  .hud .eslider { width: 58vw; }
  .eslider__value { min-width: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .final__layer > i { animation: none; }
}