/* ==========================================================
   Sempai Cristal · Visual polish & motion layer
   Mantiene el diseño base y añade profundidad, microinteracción
   y animación progresiva sin bloquear accesibilidad.
   ========================================================== */

:root{
  --motion-fast:180ms;
  --motion-med:360ms;
  --motion-slow:720ms;
  --ease-out:cubic-bezier(.22,.78,.22,1);
  --ease-soft:cubic-bezier(.2,.8,.2,1);
  --glow-accent:rgba(199,101,115,.22);
  --glow-warm:rgba(216,180,106,.12);
}

html{
  scroll-padding-top:92px;
  scrollbar-color:rgba(199,101,115,.58) #090d0b;
  scrollbar-width:thin;
}

body{
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.18;
  mix-blend-mode:soft-light;
  background-image:
    radial-gradient(circle at 18% 23%,rgba(255,255,255,.035) 0 1px,transparent 1.2px),
    radial-gradient(circle at 72% 64%,rgba(255,255,255,.025) 0 1px,transparent 1.2px);
  background-size:19px 19px,27px 27px;
}

::selection{
  color:#fff;
  background:rgba(155,63,79,.72);
}

/* Scroll progress */
.site-scroll-progress{
  position:fixed;
  z-index:10000;
  top:0;
  left:0;
  width:100%;
  height:3px;
  pointer-events:none;
  transform-origin:left center;
  transform:scaleX(var(--scroll-progress,0));
  background:linear-gradient(90deg,var(--accent-light),#ef9fa9,var(--warm));
  box-shadow:0 0 16px rgba(199,101,115,.45);
}

/* Header / navigation */
.site-header,
.story-header,
.legal-header{
  transition:
    background var(--motion-med) ease,
    border-color var(--motion-med) ease,
    box-shadow var(--motion-med) ease,
    min-height var(--motion-med) ease;
}

.site-header.is-scrolled,
.story-header.is-scrolled,
.legal-header.is-scrolled{
  background:rgba(8,11,9,.86) !important;
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 12px 42px rgba(0,0,0,.22);
  backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
}

.brand-mark,
.story-brand img,
.legal-brand img{
  position:relative;
  transition:
    transform var(--motion-med) var(--ease-out),
    box-shadow var(--motion-med) ease,
    border-color var(--motion-med) ease;
}

.brand:hover .brand-mark,
.story-brand:hover img,
.legal-brand:hover img{
  transform:translateY(-2px) rotate(-2deg) scale(1.045);
  border-color:rgba(199,101,115,.38);
  box-shadow:0 12px 34px rgba(155,63,79,.25);
}

.main-nav > a{
  position:relative;
  padding:10px 0;
  color:rgba(244,241,234,.78);
  transition:color var(--motion-fast) ease;
}

.main-nav > a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:0;
  height:2px;
  border-radius:999px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,var(--accent-light),var(--warm));
  box-shadow:0 0 12px rgba(199,101,115,.28);
  transition:width var(--motion-med) var(--ease-out);
}

.main-nav > a:hover,
.main-nav > a.is-active{
  color:#fff;
}

.main-nav > a:hover::after,
.main-nav > a.is-active::after{
  width:74%;
}

.menu-toggle{
  width:44px;
  height:44px;
  border-radius:14px !important;
  transition:background var(--motion-fast),transform var(--motion-fast);
}

.menu-toggle:hover{
  background:rgba(255,255,255,.06) !important;
  transform:scale(1.04);
}

/* Hero */
.hero{
  --hero-x:0px;
  --hero-y:0px;
  --hero-scroll:0px;
}

.hero::after{
  content:"";
  position:absolute;
  inset:auto -10% -32% 32%;
  z-index:-1;
  height:58%;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(155,63,79,.18),transparent 66%);
  filter:blur(28px);
}

html.motion-enhanced .hero-media{
  transform:translate3d(var(--hero-x),calc(var(--hero-y) + var(--hero-scroll)),0) scale(1.075);
  transition:transform 180ms linear;
  animation:heroBreath 14s ease-in-out infinite alternate;
  will-change:transform;
}

.hero-overlay{
  overflow:hidden;
}

.hero-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.24;
  background:
    linear-gradient(115deg,transparent 12%,rgba(255,255,255,.05) 27%,transparent 41%);
  transform:translateX(-90%);
  animation:heroLightSweep 10s 2.1s ease-in-out infinite;
}

.hero-content::before{
  content:"";
  position:absolute;
  left:-26px;
  top:42%;
  width:2px;
  height:74px;
  border-radius:4px;
  background:linear-gradient(var(--accent-light),transparent);
  opacity:.75;
}

html.motion-enhanced .hero-content > .eyebrow,
html.motion-enhanced .hero-content > h1,
html.motion-enhanced .hero-content > .hero-copy{
  opacity:0;
  translate:0 24px;
  animation:heroTextIn .9s var(--ease-out) forwards;
}

html.motion-enhanced .hero-content > .eyebrow{animation-delay:.18s}
html.motion-enhanced .hero-content > h1{animation-delay:.32s}
html.motion-enhanced .hero-content > .hero-copy{animation-delay:.5s}

.hero h1{
  text-wrap:balance;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.28));
}

.hero h1 span{
  position:relative;
  display:inline-block;
}

.hero h1 span::after{
  content:"";
  position:absolute;
  left:5%;
  right:4%;
  bottom:-8px;
  height:7px;
  opacity:.42;
  border-radius:50%;
  background:radial-gradient(ellipse at center,var(--accent-light),transparent 70%);
  filter:blur(5px);
}

/* Sections */
main > .section{
  position:relative;
  isolation:isolate;
}

main > .section::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  width:min(520px,58vw);
  aspect-ratio:1;
  right:-20%;
  top:8%;
  border-radius:50%;
  opacity:.07;
  background:radial-gradient(circle,var(--accent-light),transparent 66%);
  filter:blur(36px);
}

main > .section:nth-of-type(even)::after{
  right:auto;
  left:-22%;
  background:radial-gradient(circle,var(--warm),transparent 66%);
  opacity:.045;
}

.section-heading{
  position:relative;
}

.section-heading::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-16px;
  width:68px;
  height:1px;
  background:linear-gradient(90deg,var(--accent-light),transparent);
  transition:width .65s var(--ease-out);
}

.section-heading.is-visible::after{
  width:118px;
}

.section-heading h2,
.legal-hero h1,
.story-hero h1{
  font-family:"Cormorant Garamond",serif !important;
  text-wrap:balance;
}

.eyebrow{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
}

.eyebrow::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 5px color-mix(in srgb,currentColor 12%,transparent);
}

/* Reveal system */
html.motion-enhanced .reveal-item{
  opacity:0;
  translate:0 28px;
  filter:blur(7px);
  transition:
    opacity .72s var(--ease-out),
    translate .72s var(--ease-out),
    filter .72s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}

html.motion-enhanced .reveal-item.reveal-from-left{translate:-34px 0}
html.motion-enhanced .reveal-item.reveal-from-right{translate:34px 0}

html.motion-enhanced .reveal-item.is-visible{
  opacity:1;
  translate:0 0;
  filter:blur(0);
}

/* Cards, surfaces and interactive shine */
.message-card,
.featured-card,
.merch-card,
.set-card,
.social-card,
.amazon-wishlist-card,
.support-transfer-card,
.story-ending,
.legal-note{
  backface-visibility:hidden;
}

.featured-card,
.merch-card,
.set-card,
.amazon-wishlist-card,
.support-transfer-card{
  position:relative;
}

.featured-card::after,
.merch-card::after,
.set-card::after,
.amazon-wishlist-card::before,
.support-transfer-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:0;
  border-radius:inherit;
  background:radial-gradient(
    320px circle at var(--pointer-x,50%) var(--pointer-y,50%),
    rgba(255,255,255,.11),
    transparent 43%
  );
  transition:opacity var(--motion-med) ease;
}

.featured-card:hover::after,
.merch-card:hover::after,
.set-card:hover::after,
.amazon-wishlist-card:hover::before,
.support-transfer-card:hover::before{
  opacity:1;
}

.featured-card,
.merch-card,
.set-card{
  transition:
    translate var(--motion-med) var(--ease-out),
    transform var(--motion-med) var(--ease-out),
    border-color var(--motion-med) ease,
    box-shadow var(--motion-med) ease !important;
}

.featured-card:hover,
.merch-card:hover,
.set-card:hover{
  translate:0 -7px;
  border-color:rgba(199,101,115,.34) !important;
  box-shadow:
    0 30px 74px rgba(0,0,0,.34),
    0 0 0 1px rgba(199,101,115,.05) inset,
    0 0 42px rgba(155,63,79,.07) !important;
}

.featured-image,
.merch-card-media img,
.set-card-media img{
  transition:transform .75s var(--ease-soft),filter .5s ease !important;
}

.featured-card:hover .featured-image,
.merch-card:hover .merch-card-media img,
.set-card:hover .set-card-media img{
  transform:scale(1.045) !important;
  filter:saturate(1.04) contrast(1.02);
}

.featured-view-hint{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Message */
.message-card{
  overflow:hidden;
  border-color:rgba(199,101,115,.16) !important;
  box-shadow:0 26px 74px rgba(0,0,0,.24) !important;
}

.message-card::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-70px;
  top:-90px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(199,101,115,.18),transparent 70%);
  animation:softFloat 7s ease-in-out infinite alternate;
}

.message-signature{
  transition:letter-spacing .35s ease,color .35s ease;
}

.message-card:hover .message-signature{
  color:#edc2ca;
  letter-spacing:.03em;
}

/* Buttons */
.btn,
.merch-catalog-button,
.set-buy-button,
.featured-original-link,
.cosplay-modal-original,
.copy-donation-button,
.language-trigger{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-med) ease,
    filter var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease !important;
}

.btn::after,
.merch-catalog-button::after,
.set-buy-button::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-70%;
  left:-35%;
  width:30%;
  height:240%;
  opacity:.36;
  transform:rotate(20deg) translateX(-250%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transition:transform .7s var(--ease-out);
}

.btn:hover::after,
.merch-catalog-button:hover::after,
.set-buy-button:hover::after{
  transform:rotate(20deg) translateX(520%);
}

.btn:hover,
.merch-catalog-button:hover,
.set-buy-button:hover,
.featured-original-link:hover,
.cosplay-modal-original:hover{
  transform:translateY(-2px);
}

.btn:active,
.merch-catalog-button:active,
.set-buy-button:active,
.copy-donation-button:active,
.language-trigger:active{
  transform:translateY(0) scale(.97);
}

.motion-ripple{
  position:absolute;
  z-index:8;
  width:12px;
  height:12px;
  pointer-events:none;
  border-radius:50%;
  background:rgba(255,255,255,.36);
  transform:translate(-50%,-50%) scale(0);
  animation:ripple .58s ease-out forwards;
}

/* Carousel */
.carousel-viewport{
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}

.carousel-arrow{
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  transition:transform .25s var(--ease-out),background .25s,border-color .25s,box-shadow .25s !important;
}

.carousel-arrow:hover{
  border-color:rgba(199,101,115,.45) !important;
  background:rgba(80,31,40,.82) !important;
  box-shadow:0 14px 38px rgba(0,0,0,.34),0 0 24px rgba(155,63,79,.15);
}

.carousel-arrow.prev:hover{transform:translateY(-50%) translateX(-3px) !important}
.carousel-arrow.next:hover{transform:translateY(-50%) translateX(3px) !important}

/* Merch and Sets */
.merch-price,
.set-price,
.merch-size-badge,
.set-platform-badge{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

.merch-price,
.set-price{
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}

.merch-card:hover .merch-price,
.set-card:hover .set-price{
  transform:translateY(-1px);
  border-color:rgba(199,101,115,.4);
  background:rgba(155,63,79,.24);
}

/* Support */
.amazon-wishlist-card{
  transition:border-color .35s ease,box-shadow .35s ease,transform .35s var(--ease-out);
}

.amazon-wishlist-card:hover{
  border-color:rgba(255,153,0,.2);
  box-shadow:0 30px 74px rgba(0,0,0,.25),0 0 54px rgba(255,153,0,.035);
}

.amazon-mark{
  animation:amazonPulse 4s ease-in-out infinite;
}

.support-transfer-card{
  transition:border-color .35s ease,background .35s ease,translate .35s var(--ease-out);
}

.support-transfer-card:hover{
  translate:0 -3px;
  border-color:rgba(199,101,115,.32);
  background:
    radial-gradient(circle at 8% 20%,rgba(155,63,79,.17),transparent 34%),
    rgba(255,255,255,.03);
}

.support-heart{
  animation:heartBeat 4.8s ease-in-out infinite;
}

/* Social */
#redes .social-card{
  transition:transform .35s var(--ease-out),box-shadow .35s,border-color .35s !important;
}

#redes .social-card:hover{
  transform:translateY(-7px) !important;
  box-shadow:0 28px 64px rgba(0,0,0,.34) !important;
}

#redes .social-icon{
  transition:transform .4s var(--ease-out),filter .35s ease;
}

#redes .social-card:hover .social-icon{
  transform:translateY(-2px) rotate(-4deg) scale(1.08);
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.22));
}

/* Language dropdown */
.language-menu{
  transform-origin:top right;
  box-shadow:0 24px 64px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.language-menu button{
  transition:background .2s ease,color .2s ease,translate .2s ease !important;
}

.language-menu button:hover{
  translate:3px 0;
}

/* Modals */
.donation-modal[open] .donation-modal-card,
.cosplay-modal[open] .cosplay-modal-shell{
  animation:modalIn .42s var(--ease-out) both;
}

.donation-modal::backdrop,
.cosplay-modal::backdrop{
  animation:backdropIn .32s ease both;
}

.donation-data-row{
  transition:border-color .25s ease,background .25s ease,translate .25s var(--ease-out);
}

.donation-data-row:hover{
  translate:3px 0;
  border-color:rgba(199,101,115,.20);
  background:rgba(255,255,255,.06);
}

/* Story */
.story-hero{
  position:relative;
  overflow:hidden;
}

.story-hero::after{
  content:"";
  position:absolute;
  right:-8%;
  top:-18%;
  width:min(520px,60vw);
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(155,63,79,.14),transparent 68%);
  filter:blur(18px);
}

.story-quote{
  transition:translate .35s var(--ease-out),border-color .35s ease,background .35s ease;
}

.story-quote:hover{
  translate:5px 0;
  border-color:rgba(199,101,115,.9);
  background:linear-gradient(90deg,rgba(155,63,79,.14),rgba(155,63,79,.035));
}

.story-section::after{
  content:"";
  position:absolute;
  left:35px;
  top:86px;
  bottom:-1px;
  width:1px;
  opacity:.22;
  background:linear-gradient(var(--accent-light),transparent);
}

.story-section-number::before{
  transition:color .3s ease,transform .3s var(--ease-out);
}

.story-section:hover .story-section-number::before{
  color:#e3a4ae;
  transform:translateY(-2px) scale(1.05);
}

.story-ending{
  position:relative;
  overflow:hidden;
}

.story-ending::after{
  content:"";
  position:absolute;
  inset:-40% 20% auto;
  height:180px;
  background:radial-gradient(ellipse,rgba(199,101,115,.13),transparent 70%);
  animation:softFloat 6s ease-in-out infinite alternate;
}

/* Legal pages */
.legal-hero{
  position:relative;
}

.legal-section{
  position:relative;
  padding-left:0;
  transition:padding-left .3s var(--ease-out),border-color .3s ease;
}

.legal-section::before{
  content:"";
  position:absolute;
  left:-16px;
  top:4px;
  bottom:30px;
  width:2px;
  border-radius:2px;
  opacity:0;
  background:linear-gradient(var(--accent-light),transparent);
  transition:opacity .3s ease,left .3s ease;
}

.legal-section:hover{
  padding-left:8px;
  border-color:rgba(199,101,115,.12);
}

.legal-section:hover::before{
  left:-8px;
  opacity:.8;
}

/* Footer */
.site-footer,
.story-footer,
.legal-footer{
  position:relative;
  overflow:hidden;
}

.site-footer::before,
.story-footer::before,
.legal-footer::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(720px,80vw);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(199,101,115,.28),transparent);
}

.footer-links a,
.story-footer a,
.legal-footer a{
  transition:color .2s ease,translate .2s ease;
}

.footer-links a:hover,
.story-footer a:hover,
.legal-footer a:hover{
  translate:0 -1px;
}

/* Focus accessibility */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid rgba(231,164,175,.95);
  outline-offset:4px;
  border-radius:10px;
}

/* Page entry */
html.motion-enhanced body{
  animation:pageIn .5s ease both;
}

/* Keyframes */
@keyframes pageIn{
  from{opacity:.001}
  to{opacity:1}
}

@keyframes heroTextIn{
  from{opacity:0;translate:0 26px;filter:blur(7px)}
  to{opacity:1;translate:0 0;filter:blur(0)}
}

@keyframes heroBreath{
  0%{background-position:50% 50%}
  100%{background-position:51.2% 49.4%}
}

@keyframes heroLightSweep{
  0%,70%{transform:translateX(-100%);opacity:0}
  78%{opacity:.25}
  92%{transform:translateX(110%);opacity:.08}
  100%{transform:translateX(110%);opacity:0}
}

@keyframes softFloat{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-8px,12px,0) scale(1.08)}
}

@keyframes heartBeat{
  0%,84%,100%{transform:scale(1)}
  89%{transform:scale(1.08)}
  94%{transform:scale(1)}
  97%{transform:scale(1.05)}
}

@keyframes amazonPulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 rgba(255,153,0,0)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 28px rgba(255,153,0,.12)}
}

@keyframes ripple{
  to{transform:translate(-50%,-50%) scale(18);opacity:0}
}

@keyframes modalIn{
  from{opacity:0;transform:translateY(18px) scale(.965);filter:blur(5px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

@keyframes backdropIn{
  from{opacity:0}
  to{opacity:1}
}

/* Responsive refinements */
@media(max-width:900px){
  .main-nav{
    border:1px solid rgba(255,255,255,.09);
    background:rgba(8,11,9,.94) !important;
    box-shadow:0 26px 60px rgba(0,0,0,.38);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
  }

  .main-nav > a{
    width:100%;
    padding:12px 10px;
    border-radius:12px;
  }

  .main-nav > a::after{display:none}

  .main-nav > a:hover,
  .main-nav > a.is-active{
    background:rgba(155,63,79,.12);
  }

  .hero-content::before{display:none}
  .carousel-viewport{mask-image:none;-webkit-mask-image:none}
}

@media(max-width:700px){
  body::before{opacity:.1}

  .section{padding-top:76px;padding-bottom:76px}

  main > .section::after{opacity:.04}

  .story-section::after{display:none}

  .legal-section:hover{padding-left:0}
  .legal-section::before{display:none}

  html.motion-enhanced .reveal-item,
  html.motion-enhanced .reveal-item.reveal-from-left,
  html.motion-enhanced .reveal-item.reveal-from-right{
    translate:0 18px;
  }
}

@media(pointer:coarse){
  .featured-card::after,
  .merch-card::after,
  .set-card::after,
  .amazon-wishlist-card::before,
  .support-transfer-card::before{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  html.motion-enhanced .reveal-item,
  html.motion-enhanced .reveal-item.reveal-from-left,
  html.motion-enhanced .reveal-item.reveal-from-right{
    opacity:1 !important;
    translate:0 0 !important;
    filter:none !important;
  }

  html.motion-enhanced .hero-media{transform:none !important}
}