/* Experiencia cinematografica exclusiva de la pagina de inicio. */
:root {
  --lynk-mint: #1ef1c6;
  --premium-ease: cubic-bezier(.16, 1, .3, 1);
}

body[data-page="inicio"] {
  background: #000;
}

body[data-page="inicio"].premium-loading {
  overflow: hidden;
}

.premium-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 50% 44%, rgba(30, 241, 198, .09), transparent 23rem),
    #030303;
  opacity: 1;
  visibility: visible;
  transition: opacity .75s var(--premium-ease), visibility .75s;
}

.premium-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black, transparent 70%);
  animation: premium-grid 5s linear infinite;
}

.premium-loader::after {
  content: "";
  position: absolute;
  width: min(64vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(30, 241, 198, .12);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(30, 241, 198, .05), inset 0 0 90px rgba(30, 241, 198, .035);
  animation: premium-orbit 2.2s var(--premium-ease) both;
}

.premium-loader__center {
  position: relative;
  z-index: 2;
  width: min(72vw, 430px);
  text-align: center;
}

.premium-loader__mark {
  overflow: hidden;
  padding: 12px 5px;
  clip-path: inset(0 100% 0 0);
  animation: premium-logo-reveal .9s .18s var(--premium-ease) forwards;
}

.premium-loader__mark img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 24px rgba(255,255,255,.08));
}

.premium-loader__country {
  margin: 18px 0 28px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .72em;
  text-indent: .72em;
  color: rgba(255,255,255,.42);
  opacity: 0;
  animation: premium-soft-up .7s .72s var(--premium-ease) forwards;
}

.premium-loader__track {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}

.premium-loader__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--lynk-mint) 25%, #fff 75%, transparent);
  transform: translateX(-100%);
  animation: premium-load-line 1.55s .22s var(--premium-ease) forwards;
}

.premium-loader__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 11px;
  font-size: 8px;
  letter-spacing: .25em;
  color: rgba(255,255,255,.28);
  text-transform: uppercase;
}

.premium-loader.is-exiting {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.premium-loader.is-exiting .premium-loader__center {
  transform: translateY(-14px) scale(.985);
  opacity: 0;
  transition: transform .7s var(--premium-ease), opacity .45s ease;
}

.premium-scroll-progress {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--lynk-mint), #fff);
  box-shadow: 0 0 12px rgba(30,241,198,.5);
}

.premium-cursor-glow {
  position: fixed;
  z-index: 45;
  left: 0;
  top: 0;
  width: 420px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(circle, rgba(30,241,198,.06), rgba(30,241,198,0) 67%);
  transition: opacity .4s ease;
  mix-blend-mode: screen;
}

.premium-cursor-glow.is-active { opacity: 1; }

body[data-page="inicio"].premium-enhanced nav {
  transition: transform 1s var(--premium-ease), opacity .8s ease, background-color .35s ease;
}

body[data-page="inicio"].premium-loading nav {
  transform: translateY(-105%);
  opacity: 0;
}

.premium-hero::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: #050505;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 1.25s .1s var(--premium-ease);
}

.premium-ready .premium-hero::after { transform: scaleX(0); }

.premium-hero .premium-hero-media {
  overflow: hidden;
}

.premium-hero .premium-hero-media img,
.premium-model-panel .premium-model-media img {
  scale: 1.095;
  translate: 0 var(--premium-parallax, 0px);
  transition: scale 2.2s var(--premium-ease), filter 1.6s ease;
  will-change: scale, translate;
}

.premium-loading .premium-hero .premium-hero-media img {
  filter: saturate(.65) brightness(.68);
}

.premium-ready .premium-hero .premium-hero-media img { scale: 1.025; }

.premium-hero-step {
  opacity: 0 !important;
  translate: 0 34px;
  filter: blur(8px);
  transition:
    opacity .85s calc(.38s + var(--premium-step, 0) * .13s) ease,
    translate 1.05s calc(.34s + var(--premium-step, 0) * .13s) var(--premium-ease),
    filter .95s calc(.34s + var(--premium-step, 0) * .13s) ease;
}

.premium-ready .premium-hero-step {
  opacity: 1 !important;
  translate: 0 0;
  filter: blur(0);
}

.premium-hero h1 span {
  background: linear-gradient(105deg, #fff 10%, #fff 48%, #b7fff0 53%, #fff 58%, #fff 90%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: premium-title-sheen 7s 2.5s ease-in-out infinite;
}

.premium-hero h1 span + span { opacity: .7; }

.premium-hero-signal {
  position: absolute;
  z-index: 11;
  top: 50%;
  right: clamp(24px, 5vw, 76px);
  width: 1px;
  height: clamp(120px, 23vh, 230px);
  overflow: hidden;
  background: rgba(255,255,255,.13);
  opacity: 0;
  transition: opacity .7s 1.05s ease;
}

.premium-ready .premium-hero-signal { opacity: 1; }

.premium-hero-signal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, var(--lynk-mint), transparent);
  transform: translateY(-100%);
  animation: premium-signal 2.8s 1.4s ease-in-out infinite;
}

.premium-model-panel::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: #030303;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 1.2s var(--premium-ease);
}

.premium-model-panel:nth-child(even)::after { transform-origin: left; }
.premium-model-panel.is-visible::after { transform: scaleX(0); }

.premium-model-panel .premium-model-media img {
  scale: 1.08;
  filter: saturate(.7) brightness(.75);
}

.premium-model-panel.is-visible .premium-model-media img {
  scale: 1.025;
  filter: saturate(1) brightness(1);
}

.premium-reveal-content {
  opacity: 0 !important;
  translate: 0 46px;
  filter: blur(7px);
  transition: opacity .9s .35s ease, translate 1.15s .28s var(--premium-ease), filter 1s .28s ease;
}

.is-visible .premium-reveal-content,
.premium-reveal-content.is-visible {
  opacity: 1 !important;
  translate: 0 0;
  filter: blur(0);
}

.premium-section-reveal {
  opacity: 0;
  translate: 0 55px;
  transition: opacity 1s ease, translate 1.2s var(--premium-ease);
}

.premium-section-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

body[data-page="inicio"] a button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body[data-page="inicio"] a button::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -100%;
  left: -45%;
  width: 30%;
  height: 300%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: rotate(20deg) translateX(-250%);
  transition: transform .75s var(--premium-ease);
}

body[data-page="inicio"] a:hover button::after {
  transform: rotate(20deg) translateX(650%);
}

@keyframes premium-logo-reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes premium-soft-up { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(10px); } }
@keyframes premium-load-line { to { transform: translateX(0); } }
@keyframes premium-grid { to { background-position: 0 72px, 72px 0; } }
@keyframes premium-orbit { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes premium-signal { 0% { transform: translateY(-100%); } 65%, 100% { transform: translateY(100%); } }
@keyframes premium-title-sheen { 0%, 65%, 100% { background-position: 100% 0; } 78% { background-position: 0 0; } }

@media (max-width: 767px) {
  .premium-loader__center { width: min(70vw, 310px); }
  .premium-loader::after { width: 115vw; }
  .premium-hero-signal { display: none; }
  .premium-cursor-glow { display: none; }
  .premium-hero .premium-hero-media img,
  .premium-model-panel .premium-model-media img { scale: 1.045; }
  .premium-ready .premium-hero .premium-hero-media img,
  .premium-model-panel.is-visible .premium-model-media img { scale: 1.01; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-loader::before,
  .premium-loader::after,
  .premium-loader__mark,
  .premium-loader__bar,
  .premium-hero h1 span,
  .premium-hero-signal::after { animation: none !important; }
  .premium-loader__mark { clip-path: none; }
  .premium-loader__country { opacity: 1; }
  .premium-hero::after,
  .premium-model-panel::after { display: none; }
  .premium-hero-step,
  .premium-reveal-content,
  .premium-section-reveal { opacity: 1 !important; translate: none !important; filter: none !important; transition: none !important; }
  .premium-hero .premium-hero-media img,
  .premium-model-panel .premium-model-media img { scale: 1 !important; translate: none !important; transition: none !important; }
}
