/* ============================================================= PAOLA E IAN · INTRO CINEMATOGRÁFICA "MIDNIGHT RIDE" · v3 Guion: ACTO 1 → un vaquero cruza galopando el desierto nocturno ACTO 2 → letras grandes "Bienvenidos al Cumpleaños de Paola e Ian" (4 s) ACTO 3 → estrella del Oeste + botón vaquero "Entrar" ENTRAR → video a pantalla completa → al terminar, la invitación Escena hecha con CSS + SVG (sólo una foto de fondo) · mobile-first ============================================================= */ /* ---------- Paleta propia de la intro ---------- */ .intro{ --oro-1:#fff6d0; --oro-2:#f7cf62; --oro-3:#e0a52c; --oro-4:#a86f13; --oro-grad:linear-gradient(178deg, #fff8dd 0%, #fbdf8c 22%, #eab73f 48%, #fdeaa6 62%, #cf9420 84%, #f5d474 100%); --ambar:#f0b94a; --cuero-1:#5a3520; --cuero-2:#3a2013; --cuero-3:#2a170d; --laton:#e8b45c; } /* La intro sólo existe si el JS del marcó html.is-intro */ .intro{ display:none; } html.is-intro{ overflow:hidden; height:100%; } html.is-intro body{ overflow:hidden; } /* Oculta la interfaz de la página mientras corre la intro */ html.is-intro .theme-toggle, html.is-intro .progress, html.is-intro .dock, html.is-intro .skip-link{ opacity:0 !important; pointer-events:none !important; } /* El hero espera su turno */ html.is-intro .hero__inner{ animation:none; opacity:0; transform:translateY(30px); } /* ---------- Contenedor ---------- */ html.is-intro .intro{ display:block; position:fixed; inset:0; z-index:500; overflow:hidden; background:#03040a; opacity:1; transition:opacity .8s ease; --px:0; --py:0; } .intro.is-done{ opacity:0; pointer-events:none; } .intro.is-behind{ opacity:0; transition:opacity .45s ease; pointer-events:none; } .intro *{ -webkit-tap-highlight-color:transparent; } /* ============================================================= ESCENA · desierto nocturno ============================================================= */ .intro__scene{ position:absolute; inset:0; overflow:hidden; } /* Fotografía de fondo */ .intro__photo{ position:absolute; inset:-2%; background:url("../images/intro-noche.png") center 42% / cover no-repeat; opacity:0; transform:scale(1.06) translate3d(calc(var(--px) * -10px), calc(var(--py) * -6px), 0); animation:fotoIn 2.6s ease .1s forwards, fotoDrift 18s ease-in-out 2s infinite alternate; } @keyframes fotoIn{ to{ opacity:.72; } } @keyframes fotoDrift{ to{ transform:scale(1.12) translate3d(-1%,-1%,0); } } /* Cielo con degradado y vía láctea */ .intro__sky{ position:absolute; inset:0; background: radial-gradient(120% 70% at 50% 100%, rgba(255,158,80,.34) 0%, rgba(180,70,40,.18) 30%, transparent 62%), radial-gradient(46% 30% at 74% 22%, rgba(122,88,190,.26), transparent 72%), linear-gradient(180deg, rgba(2,3,12,.94) 0%, rgba(8,11,38,.78) 22%, rgba(28,20,64,.52) 42%, rgba(70,34,64,.42) 60%, rgba(140,58,54,.40) 76%, rgba(190,92,50,.44) 100%); opacity:0; animation:cieloIn 2.2s ease forwards; } @keyframes cieloIn{ to{ opacity:1; } } /* Estrellas */ .intro__stars{ position:absolute; inset:0 0 40% 0; opacity:0; background-repeat:no-repeat; background-image: radial-gradient(1.7px 1.7px at 12% 18%, #fff, transparent), radial-gradient(1.4px 1.4px at 26% 9%, #eaf3ff, transparent), radial-gradient(1.9px 1.9px at 38% 26%, #fff, transparent), radial-gradient(1.2px 1.2px at 52% 12%, #fff, transparent), radial-gradient(1.7px 1.7px at 63% 22%, #dfeaff, transparent), radial-gradient(1.3px 1.3px at 74% 8%, #fff, transparent), radial-gradient(2px 2px at 86% 20%, #fff, transparent), radial-gradient(1.3px 1.3px at 92% 34%, #eaf3ff, transparent), radial-gradient(1.5px 1.5px at 6% 34%, #fff, transparent), radial-gradient(1.2px 1.2px at 45% 38%, #fff, transparent), radial-gradient(1.4px 1.4px at 69% 40%, #fff, transparent), radial-gradient(1.1px 1.1px at 19% 46%, #e6efff, transparent); transform:translate3d(calc(var(--px) * -4px), calc(var(--py) * -3px), 0); animation:estrellasIn 2.4s ease .3s forwards, titilar 5s ease-in-out 2.6s infinite; } @keyframes estrellasIn{ to{ opacity:.95; } } @keyframes titilar{ 0%,100%{ opacity:.95; } 50%{ opacity:.55; } } /* Luna */ .intro__moon{ position:absolute; right:12%; top:12%; width:clamp(56px,15vw,116px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 36% 32%, #fffdf3 0%, #ffeec2 46%, #f3cf86 74%, #d8a552 100%); box-shadow: 0 0 24px rgba(255,232,178,.55), 0 0 70px rgba(255,206,120,.35), 0 0 150px rgba(255,186,96,.22); opacity:0; transform:translate3d(calc(var(--px) * -14px), calc(var(--py) * -8px), 0); animation:lunaIn 2.6s ease .35s forwards; } @keyframes lunaIn{ to{ opacity:.96; } } /* Cordilleras */ .intro__ridge{ position:absolute; left:-2%; right:-2%; bottom:26%; height:22%; color:#1c1030; opacity:0; transform:translate3d(calc(var(--px) * -10px),0,0); animation:capaIn 1.8s ease .5s forwards; } .intro__ridge--far{ bottom:31%; height:20%; color:#392256; filter:blur(1px); transform:translate3d(calc(var(--px) * -6px),0,0); } .intro__ridge svg{ width:100%; height:100%; display:block; } @keyframes capaIn{ to{ opacity:1; } } /* Pueblo lejano */ .intro__town{ position:absolute; left:-2%; right:-2%; bottom:27%; height:9%; color:#130b1b; opacity:0; transform:translate3d(calc(var(--px) * -16px),0,0); animation:capaIn 1.8s ease .7s forwards; } .intro__town svg{ width:100%; height:100%; display:block; } /* Suelo del desierto */ .intro__ground{ position:absolute; left:0; right:0; bottom:0; height:28%; background: radial-gradient(120% 90% at 50% 0%, rgba(255,176,100,.26), transparent 62%), linear-gradient(180deg,#4a2b18 0%,#2f1a10 42%,#120a06 100%); opacity:0; animation:capaIn 1.6s ease .5s forwards; } .intro__ground::before{ content:''; position:absolute; inset:0 0 auto; height:38%; background: repeating-linear-gradient(84deg, rgba(0,0,0,.20) 0 1px, transparent 1px 22px), repeating-linear-gradient(96deg, rgba(255,196,130,.06) 0 1px, transparent 1px 30px); opacity:.7; } /* Cactus y cerca */ .intro__props{ position:absolute; left:0; right:0; bottom:24%; height:26%; color:#0d0806; opacity:0; animation:capaIn 1.6s ease .8s forwards; } .intro__cact{ position:absolute; bottom:0; height:100%; } .intro__cact--a{ left:4%; height:74%; } .intro__cact--b{ left:16%; height:44%; opacity:.9; } .intro__cact--c{ right:8%; height:88%; } .intro__cact--d{ right:22%;height:52%; opacity:.85; } .intro__fence{ position:absolute; left:0; right:0; bottom:2%; height:16%; background: repeating-linear-gradient(90deg, rgba(12,8,6,.92) 0 5px, transparent 5px 58px); opacity:.55; } /* Viñeta y grano */ .intro__vig{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(115% 92% at 50% 48%, transparent 36%, rgba(6,4,10,.58) 74%, rgba(2,2,6,.96) 100%); } .intro__grain{ position:absolute; inset:0; pointer-events:none; opacity:.06; z-index:12; background-image: repeating-radial-gradient(circle at 17% 29%, rgba(255,255,255,.5) 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 71% 63%, rgba(255,255,255,.4) 0 1px, transparent 1px 4px); animation:granoMov .9s steps(3) infinite; } @keyframes granoMov{ 0%{ transform:translate(0,0); } 33%{ transform:translate(-2px,1px); } 66%{ transform:translate(1px,-2px); } 100%{ transform:translate(0,0); } } /* Barras de cine */ .intro__bar{ position:absolute; left:0; right:0; z-index:11; height:9%; background:#000; pointer-events:none; transition:transform 1s cubic-bezier(.6,0,.3,1); } .intro__bar--t{ top:0; } .intro__bar--b{ bottom:0; } .intro.act-3 .intro__bar--t{ transform:translateY(-100%); } .intro.act-3 .intro__bar--b{ transform:translateY(100%); } /* ============================================================= ACTO 1 · EL VAQUERO GALOPANDO ============================================================= */ .rider{ position:absolute; z-index:6; bottom:16%; left:0; width:clamp(210px,46vw,420px); color:#08060a; opacity:0; will-change:transform; pointer-events:none; } .intro.act-1 .rider{ animation:galopeCruza 3.35s cubic-bezier(.36,.06,.6,1) .25s both; } @keyframes galopeCruza{ 0%{ opacity:0; transform:translateX(-60vw) scale(.86); } 10%{ opacity:1; } 50%{ transform:translateX(30vw) scale(1); } 86%{ opacity:1; } 100%{ opacity:0; transform:translateX(112vw) scale(1.06); } } /* balanceo del galope */ .rider__art{ display:block; width:100%; height:auto; filter:drop-shadow(0 10px 14px rgba(0,0,0,.55)); animation:galopeBote .42s ease-in-out infinite; } @keyframes galopeBote{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 35%{ transform:translateY(-7px) rotate(1.2deg); } 70%{ transform:translateY(2px) rotate(-.4deg); } } /* luz de luna en el lomo del caballo */ .rider__glow{ position:absolute; left:8%; right:8%; top:22%; height:44%; background:radial-gradient(60% 60% at 40% 30%, rgba(255,206,140,.20), transparent 70%); filter:blur(8px); } /* polvo levantado por los cascos */ .rider__dust{ position:absolute; left:-6%; bottom:-2%; width:70%; height:38%; } .rider__dust span{ position:absolute; bottom:0; width:26%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 40% 40%, rgba(255,214,164,.34), rgba(160,108,66,.12) 60%, transparent 72%); filter:blur(5px); opacity:0; animation:polvoPuf 1.1s ease-out infinite; } .rider__dust span:nth-child(1){ left:2%; animation-delay:0s; } .rider__dust span:nth-child(2){ left:22%; animation-delay:.22s; } .rider__dust span:nth-child(3){ left:44%; animation-delay:.44s; } .rider__dust span:nth-child(4){ left:64%; animation-delay:.66s; } @keyframes polvoPuf{ 0%{ opacity:0; transform:translate(0,0) scale(.5); } 25%{ opacity:.85; } 100%{ opacity:0; transform:translate(-34px,-16px) scale(1.7); } } /* ============================================================= ACTO 2 · LETRAS GRANDES DE BIENVENIDA (4 segundos) ============================================================= */ .intro__titles{ position:absolute; inset:0; z-index:9; display:grid; place-items:center; padding:0 18px; pointer-events:none; } .ttl{ margin:0; text-align:center; opacity:0; visibility:hidden; } .intro.act-2 .ttl{ visibility:visible; animation:tituloEntra 4.6s cubic-bezier(.2,.8,.2,1) both; } @keyframes tituloEntra{ 0%{ opacity:0; transform:translateY(26px) scale(.94); filter:blur(10px); } 12%{ opacity:1; transform:none; filter:blur(0); } 84%{ opacity:1; transform:scale(1.02); filter:blur(0); } 100%{ opacity:0; transform:scale(1.06); filter:blur(6px); } } .ttl__l1{ display:block; font-family:'Special Elite','Courier New',monospace; font-size:clamp(.82rem,3.7vw,1.5rem); letter-spacing:.2em; text-transform:uppercase; color:#f6e3c2; text-shadow:0 2px 10px rgba(0,0,0,.8), 0 0 26px rgba(240,185,74,.35); margin-bottom:.5em; } .ttl__l1 b{ display:block; font-weight:400; font-size:.78em; letter-spacing:.34em; color:#e0bd8a; margin-top:.5em; } /* "Paola e Ian" · oro con trazo negro El elemento pinta el CONTORNO negro y el ::before el relleno de oro encima, para que el trazo nunca tape el degradado. */ .ttl__l2{ position:relative; display:block; font-family:'Rye',serif; font-weight:400; font-size:clamp(2.6rem,14.5vw,7rem); line-height:1.04; letter-spacing:.01em; color:#07050a; -webkit-text-stroke:.13em #07050a; paint-order:stroke fill; filter:drop-shadow(0 6px 18px rgba(0,0,0,.8)); } .ttl__l2::before, .ttl__l2::after{ content:attr(data-text); position:absolute; left:0; right:0; top:0; -webkit-text-stroke:0; color:transparent; -webkit-background-clip:text; background-clip:text; } /* relleno de oro (se usa background-image: el atajo `background` reiniciaría el recorte) */ .ttl__l2::before{ background-image:var(--oro-grad); z-index:1; } /* brillo que recorre las letras */ .ttl__l2::after{ background-image:linear-gradient(100deg, transparent 34%, rgba(255,255,255,.92) 50%, transparent 66%); background-size:280% 100%; z-index:2; animation:brilloOro 2.6s ease-in-out .5s 2; } @keyframes brilloOro{ from{ background-position:180% 0; } to{ background-position:-80% 0; } } .ttl__rule{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:.7em; color:var(--ambar); font-size:clamp(.72rem,3vw,1rem); } .ttl__rule::before, .ttl__rule::after{ content:''; height:1px; width:clamp(34px,13vw,110px); background:linear-gradient(90deg, transparent, var(--ambar), transparent); } /* ============================================================= ACTO 3 · ESTRELLA DEL OESTE + BOTÓN "ENTRAR" ============================================================= */ .gate{ position:absolute; inset:auto 0 0 0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,3.4vh,26px); height:100%; padding:0 20px calc(6vh + env(safe-area-inset-bottom,0px)); opacity:0; visibility:hidden; transition:opacity .6s ease, visibility .6s; } .intro.act-3 .gate{ opacity:1; visibility:visible; } /* --- Estrella de sheriff --- */ .gate__starwrap{ position:relative; width:clamp(112px,30vw,190px); aspect-ratio:1; display:grid; place-items:center; } .intro.act-3 .gate__starwrap{ animation:estrellaSella .9s cubic-bezier(.2,1.5,.35,1) both; } @keyframes estrellaSella{ 0%{ opacity:0; transform:scale(2.1) rotate(-28deg); filter:blur(8px); } 60%{ opacity:1; filter:blur(0); } 100%{ opacity:1; transform:scale(1) rotate(0deg); } } .gate__halo{ position:absolute; inset:-24%; border-radius:50%; background:radial-gradient(circle, rgba(240,185,74,.34) 0%, rgba(240,185,74,.10) 46%, transparent 70%); animation:haloLatir 3.4s ease-in-out infinite; } @keyframes haloLatir{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.12); opacity:1; } } .gate__star{ position:relative; width:100%; height:100%; color:var(--oro-2); filter:drop-shadow(0 4px 14px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(240,185,74,.45)); animation:estrellaGira 34s linear infinite; } @keyframes estrellaGira{ to{ transform:rotate(360deg); } } .gate__star .st-ring{ stroke:var(--oro-3); } .gate__star .st-body{ fill:url(#oroStar); stroke:#2a170d; stroke-width:2.2; } .gate__star .st-txt{ fill:#2a170d; font-family:'Rye',serif; font-size:9px; letter-spacing:1px; } /* --- Botón vaquero "Entrar" --- */ .enter-wrap{ position:relative; display:inline-flex; } .enter-wrap::before{ content:''; position:absolute; inset:-14px; border-radius:999px; background:radial-gradient(closest-side, rgba(240,185,74,.26), transparent 72%); animation:haloLatir 2.8s ease-in-out infinite; pointer-events:none; } .enter-btn{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:62px; padding:0 clamp(26px,7vw,46px); border-radius:14px; cursor:pointer; font-family:'Rye',serif; font-size:clamp(1.06rem,4.6vw,1.5rem); letter-spacing:.06em; color:#fff4dc; text-shadow:0 2px 0 rgba(0,0,0,.55), 0 0 16px rgba(255,206,130,.4); border:2px solid var(--laton); background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 42%), repeating-linear-gradient(92deg, rgba(0,0,0,.10) 0 2px, transparent 2px 9px), linear-gradient(180deg, #6b3f24 0%, #4a2715 52%, #33190d 100%); box-shadow: inset 0 1px 0 rgba(255,226,170,.5), inset 0 -3px 10px rgba(0,0,0,.55), 0 10px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.5); transition:transform .16s ease, box-shadow .2s ease, filter .2s ease; animation:botonEntra .7s cubic-bezier(.2,1.4,.3,1) .35s both; } @keyframes botonEntra{ from{ opacity:0; transform:translateY(20px) scale(.94); } to{ opacity:1; transform:none; } } /* remaches de latón */ .enter-btn::before, .enter-btn::after{ content:''; position:absolute; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:radial-gradient(circle at 35% 32%, #ffe9b6, var(--laton) 60%, #8d5f1c); box-shadow:0 1px 2px rgba(0,0,0,.7); } .enter-btn::before{ left:11px; } .enter-btn::after{ right:11px; } .enter-btn__ico{ color:var(--oro-2); font-size:.92em; } .enter-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); } .enter-btn:active{ transform:translateY(1px) scale(.985); } .enter-btn:focus-visible{ outline:3px solid rgba(255,226,170,.85); outline-offset:4px; } .gate__hint{ margin:0; font-family:'Special Elite','Courier New',monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#e6cfae; opacity:.9; display:inline-flex; align-items:center; gap:8px; animation:pistaLatir 2.4s ease-in-out infinite; } @keyframes pistaLatir{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } } .gate__sub{ margin:0; text-align:center; font-family:var(--font-body, 'Alegreya Sans', sans-serif); font-size:clamp(.86rem,3.4vw,1.05rem); color:#f2ddbe; max-width:24ch; line-height:1.5; text-shadow:0 2px 8px rgba(0,0,0,.8); } .gate__sub b{ color:var(--oro-2); } /* --- Botón "saltar intro" --- */ .intro__skip{ position:absolute; z-index:13; right:14px; top:calc(14px + env(safe-area-inset-top,0px)); display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px; border-radius:999px; cursor:pointer; font-family:'Special Elite','Courier New',monospace; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:#e9d9bf; background:rgba(8,11,16,.55); border:1px solid rgba(240,185,74,.34); backdrop-filter:blur(8px); opacity:0; transition:opacity .5s ease .6s, color .2s ease, border-color .2s ease; } .intro.is-ready .intro__skip{ opacity:.9; } .intro__skip:hover{ color:#fff; border-color:rgba(240,185,74,.8); } .intro.act-3 .intro__skip{ opacity:0; pointer-events:none; transition-delay:0s; } /* ============================================================= VIDEO DE BIENVENIDA ============================================================= */ .vintro{ position:fixed; inset:0; z-index:700; background:#000; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .5s ease; } .vintro[hidden]{ display:none; } .vintro.is-on{ opacity:1; } .vintro.is-off{ opacity:0; pointer-events:none; } .vintro__video{ width:100%; height:100%; object-fit:cover; background:#000; display:block; } /* aro de carga mientras el video arranca */ .vintro__load{ position:absolute; z-index:3; width:52px; height:52px; border-radius:50%; border:3px solid rgba(255,255,255,.22); border-top-color:var(--oro-2, #f7cf62); animation:cargaGira .9s linear infinite; } @keyframes cargaGira{ to{ transform:rotate(360deg); } } .vintro.is-playing .vintro__load{ display:none; } .vintro__sound, .vintro__skip{ position:absolute; z-index:4; display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px; border-radius:999px; cursor:pointer; font-family:'Special Elite','Courier New',monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#f1e6d3; background:rgba(10,8,6,.55); border:1px solid rgba(240,185,74,.4); backdrop-filter:blur(8px); transition:color .2s ease, border-color .2s ease, background .2s ease; } .vintro__sound{ left:14px; top:calc(14px + env(safe-area-inset-top,0px)); } .vintro__skip{ right:14px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); } .vintro__sound[hidden]{ display:none; } .vintro__sound:hover, .vintro__skip:hover{ color:#fff; border-color:rgba(240,185,74,.9); background:rgba(20,14,10,.7); } .vintro__sound:focus-visible, .vintro__skip:focus-visible{ outline:2px solid rgba(255,226,170,.85); outline-offset:3px; } .vintro__skip i{ font-size:.8em; color:var(--oro-2,#f7cf62); } /* barra de avance del video */ .vintro__bar{ position:absolute; left:0; right:0; bottom:0; height:3px; z-index:4; background:rgba(255,255,255,.12); } .vintro__bar span{ display:block; height:100%; width:0; background:linear-gradient(90deg,#e0a52c,#f7cf62); } /* ============================================================= LLEGADA A LA PÁGINA ============================================================= */ html.intro-done .hero__img{ animation:heroLand 2.4s cubic-bezier(.2,.8,.2,1) both, heroDrift 26s ease-in-out 2.4s infinite alternate; } @keyframes heroLand{ from{ transform:scale(1.28); filter:brightness(1.45) saturate(.85); } to{ transform:scale(1.06); filter:var(--hero-img-filter); } } html.intro-done .hero__inner{ animation:heroArrive 1.25s cubic-bezier(.2,.8,.2,1) .18s both; } @keyframes heroArrive{ from{ opacity:0; transform:translateY(34px) scale(.98); filter:blur(6px); } to{ opacity:1; transform:none; filter:blur(0); } } html.intro-done .theme-toggle, html.intro-done .progress{ animation:uiArrive .9s ease .8s both; } @keyframes uiArrive{ from{ opacity:0; } to{ opacity:1; } } /* ============================================================= RESPONSIVE Y ACCESIBILIDAD ============================================================= */ @media (min-width:768px){ .intro__bar{ height:10%; } .rider{ bottom:15%; width:clamp(320px,34vw,480px); } .gate{ gap:26px; } } @media (max-height:560px){ .gate{ gap:10px; padding-bottom:3vh; } .gate__starwrap{ width:88px; } .gate__hint{ display:none; } .enter-btn{ min-height:52px; } .rider{ bottom:12%; width:clamp(180px,32vw,300px); } } @media (prefers-reduced-motion:reduce){ .intro__photo, .intro__sky, .intro__stars, .intro__moon, .intro__ridge, .intro__town, .intro__ground, .intro__props{ animation:none !important; opacity:1 !important; } .intro__photo{ opacity:.72 !important; } .intro__grain{ animation:none !important; } .rider, .rider__art, .rider__dust span{ animation:none !important; } .intro.act-1 .rider{ opacity:1; transform:translateX(24vw); } .intro.act-2 .ttl{ animation:none !important; opacity:1 !important; } .ttl__l2::after{ animation:none !important; } .intro.act-3 .gate__starwrap, .enter-btn{ animation:none !important; opacity:1 !important; } .gate__star, .gate__halo, .enter-wrap::before, .gate__hint{ animation:none !important; } html.intro-done .hero__img, html.intro-done .hero__inner, html.intro-done .theme-toggle, html.intro-done .progress{ animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; } }