/* Landing-only holiday animations.
 Uses DOM overlays inserted by `index-holiday-effects.js`.
 Scoped under `#landingRoot` so it never affects other pages.
 OPTIMIZED for performance
*/

#landingRoot .holiday-overlay {
 position: fixed;
 inset:0;
 pointer-events: none;
 z-index:1100;
}

/* ------------------------------
   Christmas: falling snow
   ------------------------------ */
#landingRoot[data-landing-theme="christmas"] .holiday-overlay {
  z-index: 1095;
}

#landingRoot[data-landing-theme="christmas"] .snowflake {
  position: absolute;
  top: -10vh;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.35) 55%, transparent 70%);
  opacity: var(--opacity);
  will-change: transform;
  animation:
    snow-fall var(--dur) linear infinite,
    snow-sway var(--swayDur) ease-in-out infinite;
}

@keyframes snow-fall {
  to { transform: translateY(120vh); }
}

@keyframes snow-sway {
  0%, 100% { margin-left: 0; }
  50% { margin-left: calc(var(--sway) * 1px); }
}

/* ------------------------------
   New Year: fireworks bursts
   ------------------------------ */
#landingRoot[data-landing-theme="newyear"] .holiday-overlay {
  z-index: 1095;
}

#landingRoot[data-landing-theme="newyear"] .firework {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2px;
  height: 2px;
  transform: translate(-50%, -50%);
}

#landingRoot[data-landing-theme="newyear"] .firework i {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 16px;
  transform-origin: 50% 100%;
  background: linear-gradient(to top, transparent, var(--c));
  border-radius: 2px;
  will-change: transform, opacity;
  animation: firework-ray var(--dur) ease-out infinite;
  animation-delay: var(--delay);
}

@keyframes firework-ray {
  0% { transform: rotate(var(--a)) translateY(0) scaleY(0.2); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: rotate(var(--a)) translateY(-140px) scaleY(1); opacity: 0.85; }
  100% { transform: rotate(var(--a)) translateY(-170px) scaleY(0.2); opacity: 0; }
}

/* ------------------------------
   Sakura: Falling Cherry Blossom Petals
   ------------------------------ */

#landingRoot[data-landing-theme="sakura"] .holiday-overlay {
  z-index: 1095;
  overflow: hidden;
}

/* ===== REALISTIC FALLING CHERRY BLOSSOM PETALS ===== */
#landingRoot[data-landing-theme="sakura"] .sakura-petal {
  position: absolute;
  top: -30px;
  left: var(--x);
  width: var(--size);
  height: calc(var(--size) * 0.7);
  opacity: var(--opacity);
  will-change: transform;
  animation: petal-drift var(--dur) linear forwards;
  animation-delay: var(--delay);
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  background: 
linear-gradient(
      var(--rotate, 25deg),
   transparent 45%,
      rgba(255, 255, 255, 0.8) 50%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 120% 100% at 30% 0%,
      rgba(255, 255, 255, 0.95) 0%,
      var(--color) 40%,
 rgba(255, 150, 180, 0.95) 80%
    );
  box-shadow: 
    inset 2px 2px 4px rgba(255, 255, 255, 0.5),
    0 2px 4px rgba(255, 100, 150, 0.15);
}

#landingRoot[data-landing-theme="sakura"] .sakura-petal.petal-style-2 {
  border-radius: 0 80% 50% 55% / 0 55% 50% 80%;
}

#landingRoot[data-landing-theme="sakura"] .sakura-petal.petal-style-3 {
  border-radius: 55% 50% 0 80% / 50% 55% 0 80%;
  height: calc(var(--size) * 0.6);
}

#landingRoot[data-landing-theme="sakura"] .sakura-petal.petal-style-4 {
  border-radius: 50% 55% 80% 0 / 80% 50% 55% 0;
  height: calc(var(--size) * 0.65);
}

@keyframes petal-drift {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) rotateY(0deg);
    opacity: 0;
  }
  5% {
  opacity: var(--opacity);
  }
  25% {
    transform: translateY(28vh) translateX(calc(var(--sway) * 0.5px)) rotate(90deg) rotateY(45deg);
  }
  50% {
    transform: translateY(55vh) translateX(calc(var(--sway) * 1px)) rotate(180deg) rotateY(-30deg);
  }
  75% {
    transform: translateY(82vh) translateX(calc(var(--sway) * 0.6px)) rotate(270deg) rotateY(60deg);
  }
  95% {
    opacity: var(--opacity);
  }
  100% {
  transform: translateY(110vh) translateX(calc(var(--sway) * 0.3px)) rotate(360deg) rotateY(0deg);
    opacity: 0;
  }
}

/* =====================================================
   SAKURA TREE - Realistic Cherry Blossom Tree
   ===================================================== */

/* Tree Container */
#landingRoot[data-landing-theme="sakura"] .sakura-tree-container {
 position: fixed;
 bottom:0;
 left:0;
 width:560px;
 height:100vh;
 pointer-events: none;
 z-index:2;
 overflow: visible;
}

#landingRoot[data-landing-theme="sakura"] .sakura-tree {
 position: absolute;
 bottom:0;
 left:0;
 width:100%;
 height:100%;
}

/* ===== REALISTIC TRUNK ===== */
#landingRoot[data-landing-theme="sakura"] .tree-trunk {
 position: absolute;
 bottom:0;
 left:60px;
 width:46px;
 height:50%;
 background:
 /* Bark vertical grain */
 repeating-linear-gradient(
2deg,
 transparent0px,
 transparent3px,
 rgba(0,0,0,0.15)3px,
 rgba(0,0,0,0.15)4px,
 transparent4px,
 transparent8px
 ),
 /* Main wood color with depth */
 linear-gradient(
90deg,
 #1a0a0a0%,
 #2d151515%,
 #3d1f1f30%,
 #4a282850%,
 #3d1f1f70%,
 #2d151585%,
 #1a0a0a100%
 );
 border-radius:14px16px10px8px;
 transform-origin: bottom center;
 animation: tree-sway12s ease-in-out infinite;
 z-index:10;
 opacity:1;
 /* NOTE: removed invalid filter url(#bark-roughness) (no SVG filter defined) */
}

/* Bark texture overlay */
#landingRoot[data-landing-theme="sakura"] .tree-trunk::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    /* Horizontal bark cracks */
    repeating-linear-gradient(
      88deg,
      transparent 0px,
      transparent 12px,
      rgba(0, 0, 0, 0.3) 12px,
      rgba(0, 0, 0, 0.4) 14px,
      transparent 14px,
 transparent 35px
  ),
    /* Vertical deep grooves */
    repeating-linear-gradient(
      178deg,
   transparent 0px,
      transparent 25px,
      rgba(0, 0, 0, 0.25) 25px,
      rgba(0, 0, 0, 0.35) 28px,
      transparent 28px,
      transparent 60px
    ),
    /* Knots and imperfections */
    radial-gradient(ellipse 8px 12px at 30% 25%, rgba(20, 10, 5, 0.6), transparent),
    radial-gradient(ellipse 6px 10px at 70% 55%, rgba(20, 10, 5, 0.5), transparent),
    radial-gradient(ellipse 10px 8px at 40% 75%, rgba(20, 10, 5, 0.4), transparent);
  border-radius: inherit;
  opacity: 0.9;
}

/* Moss/lichen patches */
#landingRoot[data-landing-theme="sakura"] .tree-trunk::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 15px 8px at 25% 60%, rgba(80, 100, 60, 0.25), transparent),
 radial-gradient(ellipse 10px 6px at 65% 40%, rgba(70, 90, 50, 0.2), transparent),
    radial-gradient(ellipse 12px 5px at 35% 85%, rgba(75, 95, 55, 0.15), transparent);
  border-radius: inherit;
}

@keyframes tree-sway {
  0%, 100% { transform: rotate(0deg) skewX(0deg); }
  25% { transform: rotate(0.2deg) skewX(0.1deg); }
  50% { transform: rotate(-0.15deg) skewX(-0.05deg); }
  75% { transform: rotate(0.18deg) skewX(0.08deg); }
}

/* ===== REALISTIC BRANCHES ===== */
#landingRoot[data-landing-theme="sakura"] .tree-branch {
 position: absolute;
 left: calc(60px +23px); /* anchor at trunk center */
 bottom: var(--attach-y);
 width: var(--len);
 height: var(--thick);
 transform: rotate(var(--rot));
 transform-origin:0%50%;
 z-index:9;
 opacity:1;

 /* Bark + grain */
 background:
 repeating-linear-gradient(
90deg,
 transparent0px,
 transparent4px,
 rgba(0,0,0,0.12)4px,
 rgba(0,0,0,0.12)5px
 ),
 linear-gradient(
180deg,
 #3d1f1f0%,
 #4a282830%,
 #3d1f1f50%,
 #2d151570%,
 #3d1f1f100%
 );

 /* Natural taper */
 clip-path: polygon(0%10%,85%30%,100%50%,85%70%,0%90%);
 border-radius:10px;

 /* Connector �collar� that blends into trunk */
 box-shadow:
 inset2px00 rgba(255,255,255,0.04),
 inset -2px00 rgba(0,0,0,0.18);
}

#landingRoot[data-landing-theme="sakura"] .tree-branch::before {
 content: '';
 position: absolute;
 left: -18px;
 top: -40%;
 width:28px;
 height:180%;
 background:
 radial-gradient(ellipse at60%50%, rgba(0,0,0,0.35), transparent65%),
 linear-gradient(180deg, #2d1515, #3d1f1f);
 border-radius:18px;
 filter: blur(0.2px);
}

#landingRoot[data-landing-theme="sakura"] .tree-branch::after {
 content: '';
 position: absolute;
 left: var(--sub-x,70%);
 top: calc(var(--thick) * -0.8);
 width: var(--sub-len,90px);
 height: calc(var(--thick) *0.7);
 background: inherit;
 transform: rotate(var(--sub-rot, -35deg));
 transform-origin:0%50%;
 clip-path: polygon(0%20%,85%35%,100%50%,85%65%,0%80%);
 border-radius:10px;
 opacity:0.95;
}

/* Animate branches gently */
#landingRoot[data-landing-theme="sakura"] .branch-anim {
 animation: branch-sway-generic var(--sway,8s) ease-in-out infinite;
 animation-delay: var(--delay,0s);
}

@keyframes branch-sway-generic {
0%,100% { transform: rotate(var(--rot)); }
50% { transform: rotate(calc(var(--rot) + var(--sway-deg,3deg))); }
}

/* More branches (12) */
#landingRoot[data-landing-theme="sakura"] .branch-1 { --attach-y:44%; --len:320px; --thick:18px; --rot: -24deg; --sub-len:100px; --sub-rot: -35deg; --sub-x:72%; --sway:9s; --sway-deg:3deg; }
#landingRoot[data-landing-theme="sakura"] .branch-2 { --attach-y:54%; --len:260px; --thick:15px; --rot: -40deg; --sub-len:90px; --sub-rot: -25deg; --sub-x:66%; --sway:8s; --sway-deg:4deg; --delay:0.3s; }
#landingRoot[data-landing-theme="sakura"] .branch-3 { --attach-y:62%; --len:210px; --thick:12px; --rot: -55deg; --sub-len:70px; --sub-rot: -40deg; --sub-x:64%; --sway:7s; --sway-deg:5deg; --delay:0.6s; }
#landingRoot[data-landing-theme="sakura"] .branch-4 { --attach-y:40%; --len:140px; --thick:14px; --rot:170deg; --sub-len:60px; --sub-rot:25deg; --sub-x:62%; --sway:8.5s; --sway-deg: -3deg; --delay:0.2s; }
#landingRoot[data-landing-theme="sakura"] .branch-5 { --attach-y:34%; --len:240px; --thick:16px; --rot: -10deg; --sub-len:80px; --sub-rot: -20deg; --sub-x:60%; --sway:10s; --sway-deg:2deg; --delay:0.4s; }
#landingRoot[data-landing-theme="sakura"] .branch-6 { --attach-y:50%; --len:110px; --thick:10px; --rot:150deg; --sub-len:55px; --sub-rot:18deg; --sub-x:58%; --sway:7.5s; --sway-deg: -4deg; --delay:0.7s; }
#landingRoot[data-landing-theme="sakura"] .branch-7 { --attach-y:46%; --len:220px; --thick:12px; --rot: -5deg; --sub-len:75px; --sub-rot: -30deg; --sub-x:70%; --sway:9s; --sway-deg:2deg; --delay:0.15s; }
#landingRoot[data-landing-theme="sakura"] .branch-8 { --attach-y:58%; --len:180px; --thick:11px; --rot: -30deg; --sub-len:70px; --sub-rot: -45deg; --sub-x:68%; --sway:8s; --sway-deg:3deg; --delay:0.55s; }
#landingRoot[data-landing-theme="sakura"] .branch-9 { --attach-y:66%; --len:160px; --thick:9px; --rot: -70deg; --sub-len:60px; --sub-rot: -35deg; --sub-x:62%; --sway:7s; --sway-deg:5deg; --delay:0.85s; }
#landingRoot[data-landing-theme="sakura"] .branch-10 { --attach-y:30%; --len:160px; --thick:12px; --rot:12deg; --sub-len:60px; --sub-rot: -18deg; --sub-x:64%; --sway:10.5s; --sway-deg:1.5deg; --delay:0.25s; }
#landingRoot[data-landing-theme="sakura"] .branch-11 { --attach-y:52%; --len:120px; --thick:9px; --rot:135deg; --sub-len:50px; --sub-rot:22deg; --sub-x:58%; --sway:7.8s; --sway-deg: -4deg; --delay:0.95s; }
#landingRoot[data-landing-theme="sakura"] .branch-12 { --attach-y:70%; --len:140px; --thick:9px; --rot: -80deg; --sub-len:55px; --sub-rot: -48deg; --sub-x:65%; --sway:6.8s; --sway-deg:6deg; --delay:0.45s; }

/* Apply animation helper class */
#landingRoot[data-landing-theme="sakura"] .tree-branch {
 /* ...existing properties... */
}
#landingRoot[data-landing-theme="sakura"] .tree-branch.branch-1,
#landingRoot[data-landing-theme="sakura"] .tree-branch.branch-2,
#landingRoot[data-landing-theme="sakura"] .tree-branch.branch-3,
#landingRoot[data-landing-theme="sakura"] .tree-branch.branch-4,
#landingRoot[data-landing-theme="sakura"] .tree-branch.branch-5,
#landingRoot[data-landing-theme="sakura"] .tree-branch.branch-6,
#landingRoot[data-landing-theme="sakura"] .tree-branch.branch-7,
#landingRoot[data-landing-theme="sakura"] .tree-branch.branch-8,
#landingRoot[data-landing-theme="sakura"] .tree-branch.branch-9,
#landingRoot[data-landing-theme="sakura"] .tree-branch.branch-10,
#landingRoot[data-landing-theme="sakura"] .tree-branch.branch-11,
#landingRoot[data-landing-theme="sakura"] .tree-branch.branch-12 {
 animation: branch-sway-generic var(--sway,8s) ease-in-out infinite;
 animation-delay: var(--delay,0s);
}

/* ===== BLOSSOMS: denser, sharper, more depth ===== */
#landingRoot[data-landing-theme="sakura"] .cherry-flower {
 opacity:1;
 filter: drop-shadow(02px6px rgba(0,0,0,0.18));
}

#landingRoot[data-landing-theme="sakura"] .flower-petal {
 /* crisper texture */
 background:
 radial-gradient(circle at35%35%, rgba(255,255,255,0.95), transparent55%),
 linear-gradient(var(--vein-angle,0deg), transparent46%, rgba(255,160,190,0.35)50%, transparent54%),
 radial-gradient(ellipse90%120% at50%100%, #fff7fa0%, #ffe1ea22%, #ffc0d045%, #ff9ab870%, #ff6b95100%);
 box-shadow:
 inset1px1px3px rgba(255,255,255,0.75),
 inset -2px -2px3px rgba(255,140,170,0.25),
 01px2px rgba(170,70,95,0.18);
}

#landingRoot[data-landing-theme="sakura"] .flower-center {
 box-shadow:
 006px rgba(255,214,90,0.55),
 inset0 -1px2px rgba(180,120,0,0.35);
}

/* More flowers (60) � positions are CSS-driven */
#landingRoot[data-landing-theme="sakura"] .cherry-flower {
 width: var(--size,26px);
 height: var(--size,26px);
}

/* Flower placement groups (attach around branch tips and along branches)
 (These are absolute positions inside the tree container. They cluster near branch ends.) */
#landingRoot[data-landing-theme="sakura"] .flower-1 { left:380px; bottom:56%; --size:34px; }
#landingRoot[data-landing-theme="sakura"] .flower-2 { left:365px; bottom:52%; --size:26px; }
#landingRoot[data-landing-theme="sakura"] .flower-3 { left:345px; bottom:58%; --size:22px; }
#landingRoot[data-landing-theme="sakura"] .flower-4 { left:320px; bottom:55%; --size:28px; }
#landingRoot[data-landing-theme="sakura"] .flower-5 { left:405px; bottom:54%; --size:20px; }
#landingRoot[data-landing-theme="sakura"] .flower-6 { left:330px; bottom:64%; --size:24px; }
#landingRoot[data-landing-theme="sakura"] .flower-7 { left:350px; bottom:68%; --size:18px; }
#landingRoot[data-landing-theme="sakura"] .flower-8 { left:300px; bottom:66%; --size:32px; }
#landingRoot[data-landing-theme="sakura"] .flower-9 { left:285px; bottom:62%; --size:24px; }
#landingRoot[data-landing-theme="sakura"] .flower-10 { left:270px; bottom:70%; --size:20px; }
#landingRoot[data-landing-theme="sakura"] .flower-11 { left:230px; bottom:78%; --size:26px; }
#landingRoot[data-landing-theme="sakura"] .flower-12 { left:215px; bottom:75%; --size:22px; }
#landingRoot[data-landing-theme="sakura"] .flower-13 { left:250px; bottom:80%; --size:18px; }
#landingRoot[data-landing-theme="sakura"] .flower-14 { left: -35px; bottom:46%; --size:24px; }
#landingRoot[data-landing-theme="sakura"] .flower-15 { left: -15px; bottom:44%; --size:20px; }
#landingRoot[data-landing-theme="sakura"] .flower-16 { left:310px; bottom:40%; --size:30px; }
#landingRoot[data-landing-theme="sakura"] .flower-17 { left:290px; bottom:36%; --size:24px; }
#landingRoot[data-landing-theme="sakura"] .flower-18 { left:325px; bottom:38%; --size:22px; }
#landingRoot[data-landing-theme="sakura"] .flower-19 { left:0px; bottom:56%; --size:22px; }
#landingRoot[data-landing-theme="sakura"] .flower-20 { left:18px; bottom:54%; --size:18px; }

/* Extra flowers (21-60) clustered across canopy */
#landingRoot[data-landing-theme="sakura"] .flower-21 { left:210px; bottom:52%; --size:26px; }
#landingRoot[data-landing-theme="sakura"] .flower-22 { left:180px; bottom:60%; --size:24px; }
#landingRoot[data-landing-theme="sakura"] .flower-23 { left:240px; bottom:46%; --size:22px; }
#landingRoot[data-landing-theme="sakura"] .flower-24 { left:160px; bottom:68%; --size:20px; }
#landingRoot[data-landing-theme="sakura"] .flower-25 { left:260px; bottom:58%; --size:18px; }
#landingRoot[data-landing-theme="sakura"] .flower-26 { left:275px; bottom:54%; --size:20px; }
#landingRoot[data-landing-theme="sakura"] .flower-27 { left:295px; bottom:60%; --size:18px; }
#landingRoot[data-landing-theme="sakura"] .flower-28 { left:315px; bottom:62%; --size:20px; }
#landingRoot[data-landing-theme="sakura"] .flower-29 { left:340px; bottom:60%; --size:18px; }
#landingRoot[data-landing-theme="sakura"] .flower-30 { left:360px; bottom:62%; --size:22px; }
#landingRoot[data-landing-theme="sakura"] .flower-31 { left:380px; bottom:60%; --size:18px; }
#landingRoot[data-landing-theme="sakura"] .flower-32 { left:405px; bottom:62%; --size:20px; }
#landingRoot[data-landing-theme="sakura"] .flower-33 { left:420px; bottom:58%; --size:18px; }
#landingRoot[data-landing-theme="sakura"] .flower-34 { left:390px; bottom:50%; --size:22px; }
#landingRoot[data-landing-theme="sakura"] .flower-35 { left:365px; bottom:46%; --size:18px; }
#landingRoot[data-landing-theme="sakura"] .flower-36 { left:335px; bottom:48%; --size:20px; }
#landingRoot[data-landing-theme="sakura"] .flower-37 { left:300px; bottom:48%; --size:18px; }
#landingRoot[data-landing-theme="sakura"] .flower-38 { left:270px; bottom:44%; --size:18px; }

/* =====================================================
   FOREST: Falling Leaves
   ===================================================== */

#landingRoot[data-landing-theme="forest"] .holiday-overlay {
  z-index: 1095;
  overflow: hidden;
}

/* ===== REALISTIC FALLING LEAVES ===== */
#landingRoot[data-landing-theme="forest"] .forest-leaf {
  position: absolute;
  top: -40px;
  left: var(--x);
  width: var(--size);
  height: calc(var(--size) * 0.7);
  opacity: var(--opacity);
  will-change: transform;
  animation: leaf-drift var(--dur) linear forwards;
  animation-delay: var(--delay);
  border-radius: 2px 70% 2px 70%;
  background: 
    linear-gradient(
      var(--rotate, 35deg),
      transparent 20%,
      rgba(255, 255, 255, 0.4) 40%,
      transparent 60%
    ),
    linear-gradient(
      90deg,
      var(--color) 0%,
      color-mix(in srgb, var(--color), #fff 20%) 50%,
      var(--color) 100%
    );
  box-shadow: 
    inset 1px 1px 3px rgba(255, 255, 255, 0.3),
    0 2px 4px rgba(0, 80, 0, 0.2);
}

/* Leaf vein effect */
#landingRoot[data-landing-theme="forest"] .forest-leaf::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(0, 60, 0, 0.3) 20%, 
    rgba(0, 60, 0, 0.4) 50%, 
    rgba(0, 60, 0, 0.3) 80%, 
    transparent 100%);
  transform: translateY(-50%);
}

/* Leaf style variations */
#landingRoot[data-landing-theme="forest"] .forest-leaf.leaf-style-2 {
  border-radius: 70% 2px 70% 2px;
}

#landingRoot[data-landing-theme="forest"] .forest-leaf.leaf-style-3 {
  border-radius: 50% 50% 50% 50%;
  height: calc(var(--size) * 0.5);
}

#landingRoot[data-landing-theme="forest"] .forest-leaf.leaf-style-4 {
  border-radius: 5px 50% 50% 5px;
  height: calc(var(--size) * 0.6);
}

@keyframes leaf-drift {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) rotateX(0deg) rotateY(0deg);
    opacity: 0;
  }
  5% {
    opacity: var(--opacity);
  }
  20% {
    transform: translateY(22vh) translateX(calc(var(--sway) * 0.4px)) rotate(70deg) rotateX(20deg) rotateY(-30deg);
  }
  40% {
    transform: translateY(44vh) translateX(calc(var(--sway) * 0.9px)) rotate(140deg) rotateX(-15deg) rotateY(45deg);
  }
  60% {
    transform: translateY(66vh) translateX(calc(var(--sway) * 0.5px)) rotate(210deg) rotateX(25deg) rotateY(-20deg);
  }
  80% {
    transform: translateY(88vh) translateX(calc(var(--sway) * 0.7px)) rotate(290deg) rotateX(-10deg) rotateY(35deg);
  }
  95% {
    opacity: var(--opacity);
  }
  100% {
    transform: translateY(115vh) translateX(calc(var(--sway) * 0.3px)) rotate(360deg) rotateX(15deg) rotateY(0deg);
    opacity: 0;
  }
}