/* ==========================================================
   MYTHICAL SKINCARE V2.0 — FINISHING TOUCH LAYER
   Source: approved V1.5.5 baseline.
   Purpose: preserve the existing visual language while adding
   three restrained upgrades: cover depth, tactile continuity,
   and media/proof polish. No copy or information architecture
   changes live in this file.
   ========================================================== */

.v2-refined{
  --v2-red-glow:rgba(173,38,35,.22);
  --v2-pink-glow:rgba(234,165,181,.13);
  --v2-acid-glow:rgba(165,216,70,.12);
}

.v2-refined h1,
.v2-refined h2,
.v2-refined .display-word{
  text-wrap:balance;
  font-kerning:normal;
}

.v2-refined p,
.v2-refined blockquote p{
  text-wrap:pretty;
}

.v2-refined button,
.v2-refined a{
  touch-action:manipulation;
}

/* ----------------------------------------------------------
   01 — COVER DEPTH
   The approved logo remains the hero. Desktop pointer movement
   adds only a few pixels of depth; no custom cursor and no
   navigation dependency.
   ---------------------------------------------------------- */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .v2-refined .cover-art{
    --v2-logo-x:0px;
    --v2-logo-y:0px;
    --v2-halo-x:0px;
    --v2-halo-y:0px;
    --v2-atmo-x:0px;
    --v2-atmo-y:0px;
  }

  .v2-refined .cover-logo{
    transform:translate3d(var(--v2-logo-x),var(--v2-logo-y),0);
    transition:transform 180ms cubic-bezier(.22,.72,.16,1),filter 240ms ease;
    will-change:transform;
  }

  .v2-refined .cover-art__halo{
    transform:translate3d(var(--v2-halo-x),var(--v2-halo-y),0);
    transition:transform 210ms cubic-bezier(.22,.72,.16,1);
    will-change:transform;
  }

  .v2-refined .cover-art::before{
    transform:translate3d(var(--v2-atmo-x),var(--v2-atmo-y),0) scale(1.015);
    transition:transform 240ms ease-out;
    will-change:transform;
  }

  .v2-refined .cover-art:hover .cover-logo{
    filter:saturate(1.035) contrast(1.085) drop-shadow(0 0 28px rgba(173,38,35,.24)) drop-shadow(0 0 48px rgba(165,216,70,.1));
  }

  .v2-refined .cover-sticker{
    transition:transform 220ms cubic-bezier(.22,.72,.16,1),box-shadow 220ms ease;
  }

  .v2-refined .chapter--cover:hover .cover-sticker{
    transform:rotate(5.5deg) translateY(-2px);
    box-shadow:5px 7px 0 var(--pink);
  }
}

/* Quick-nav feels printed rather than button-like. */
.v2-refined .cover-deck--nav button{
  position:relative;
  isolation:isolate;
}
.v2-refined .cover-deck--nav button::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:3px;
  height:1px;
  background:currentColor;
  opacity:.72;
  transition:right 180ms ease;
}
.v2-refined .cover-deck--nav button:hover::after,
.v2-refined .cover-deck--nav button:focus-visible::after{right:0}

/* ----------------------------------------------------------
   02 — TACTILE CHAPTER CONTINUITY
   A brief page-edge seam makes desktop chapter changes feel
   intentionally printed without introducing a new navigation
   model. Microinteractions retain the existing collage language.
   ---------------------------------------------------------- */
@media (min-width:901px){
  .v2-refined .chapter::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    z-index:45;
    pointer-events:none;
    opacity:0;
    background:linear-gradient(to bottom,transparent 3%,var(--pink) 20%,var(--red) 50%,var(--acid) 82%,transparent 97%);
    box-shadow:7px 0 28px rgba(173,38,35,.16);
  }

  .v2-refined .chapter.is-active::before{
    animation:v2PageSeam 520ms cubic-bezier(.22,.72,.16,1) both;
  }

  .v2-refined .service-ribbon,
  .v2-refined .service-note,
  .v2-refined .slime-mark{
    transition:transform 200ms cubic-bezier(.22,.72,.16,1),box-shadow 200ms ease,filter 200ms ease;
  }

  .v2-refined .service-ribbon:hover,
  .v2-refined .service-ribbon:focus-visible{
    transform:rotate(-6.5deg) translateY(-4px);
    box-shadow:9px 11px 0 var(--red);
  }

  .v2-refined .service-note:hover{
    transform:rotate(2deg) translateY(-3px);
    box-shadow:9px 10px 0 var(--red);
  }

  .v2-refined .slime-mark:hover{
    transform:rotate(6deg) scale(1.025);
    filter:drop-shadow(0 0 20px rgba(165,216,70,.16));
  }

  .v2-refined .toc button{
    position:relative;
    overflow:hidden;
    transition:padding-left 180ms ease,background 180ms ease,color 180ms ease;
  }

  .v2-refined .toc button::after{
    content:"✦";
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%) scale(.7) rotate(-14deg);
    color:var(--red);
    opacity:0;
    transition:opacity 160ms ease,transform 200ms cubic-bezier(.22,.72,.16,1);
  }

  .v2-refined .toc button:hover::after,
  .v2-refined .toc button:focus-visible::after{
    opacity:1;
    transform:translateY(-50%) scale(1) rotate(0);
  }

  .v2-refined .book-tab{
    transition:background 180ms ease,color 180ms ease,transform 180ms ease,box-shadow 180ms ease;
  }
  .v2-refined .book-tab:hover,
  .v2-refined .book-tab:focus-visible{
    transform:translateY(-50%) translateX(-3px);
    box-shadow:-11px 10px 0 rgba(0,0,0,.24);
  }
}

@keyframes v2PageSeam{
  0%{opacity:0;transform:scaleY(.55);transform-origin:50% 50%}
  28%{opacity:.9}
  100%{opacity:0;transform:scaleY(1)}
}

/* ----------------------------------------------------------
   03 — MEDIA / PROOF POLISH
   Keep V1.5.5 geometry and source assets. Improve perceived
   integration with atmosphere and make product/review proof feel
   more deliberately art-directed, not cleaner-for-cleaner's sake.
   ---------------------------------------------------------- */
@media (min-width:901px){
  .v2-refined .service-photo-frame::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
      radial-gradient(circle at 44% 35%,transparent 0 34%,rgba(11,9,9,.11) 68%,rgba(11,9,9,.34) 100%),
      linear-gradient(180deg,rgba(234,165,181,.035),transparent 24%,transparent 72%,rgba(173,38,35,.06));
    mix-blend-mode:multiply;
  }

  .v2-refined .photo-label{
    transform:rotate(-1.2deg);
    box-shadow:4px 4px 0 rgba(173,38,35,.78);
  }

  .v2-refined .result-stack::before{
    content:"";
    position:absolute;
    inset:8% 2% 6% 3%;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse at 42% 50%,rgba(234,165,181,.09),transparent 47%),
      radial-gradient(ellipse at 78% 72%,rgba(173,38,35,.12),transparent 40%);
    filter:blur(24px);
    opacity:.92;
  }

  .v2-refined .result-card{z-index:1}
  .v2-refined .result-card--video{z-index:2}
  .v2-refined .result-card--image{z-index:3}

  .v2-refined .chapter--results .result-card--video video{
    box-shadow:0 30px 62px rgba(0,0,0,.30),0 0 46px rgba(173,38,35,.055)!important;
  }

  .v2-refined .chapter--results .result-card--image img{
    box-shadow:0 22px 44px rgba(0,0,0,.27),0 0 28px rgba(234,165,181,.055)!important;
  }

  .v2-refined .featured-product-stage{
    isolation:isolate;
  }

  .v2-refined .featured-product-stage::before{
    opacity:.78;
    border-color:rgba(173,38,35,.30);
    box-shadow:0 0 0 24px rgba(165,216,70,.022),0 0 80px rgba(173,38,35,.085);
  }

  .v2-refined .featured-product-media--button img{
    transition:transform 260ms cubic-bezier(.22,.72,.16,1),filter 240ms ease;
  }

  .v2-refined .featured-product-media--button:hover img,
  .v2-refined .featured-product-media--button:focus-visible img{
    transform:translateY(-5px) rotate(-.35deg) scale(1.012);
  }

  .v2-refined .review-quote--hero,
  .v2-refined .review-quote--paper{
    transition:transform 200ms cubic-bezier(.22,.72,.16,1),box-shadow 200ms ease;
  }

  .v2-refined .review-quote--hero:hover{
    transform:rotate(-1.15deg) translateY(-3px);
  }

  .v2-refined .review-quote--paper:hover{
    transform:rotate(1.4deg) translateY(-3px);
  }
}

/* Mobile stays intentionally straightforward: no pointer depth,
   no forced transforms, no page seams, no horizontal navigation. */
@media (max-width:900px){
  .v2-refined .chapter::before{display:none!important}
  .v2-refined .cover-logo,
  .v2-refined .cover-art__halo,
  .v2-refined .cover-art::before{transform:none!important}
  .v2-refined .service-ribbon,
  .v2-refined .service-note,
  .v2-refined .slime-mark,
  .v2-refined .review-quote--hero,
  .v2-refined .review-quote--paper{transition:none}

  .v2-refined .result-stack::before{
    content:"";
    position:absolute;
    inset:10% 2% 8%;
    z-index:0;
    pointer-events:none;
    background:radial-gradient(ellipse at 55% 50%,rgba(173,38,35,.08),transparent 62%);
    filter:blur(22px);
  }
  .v2-refined .result-card{position:relative;z-index:1}
}

@media (prefers-reduced-motion:reduce){
  .v2-refined *,
  .v2-refined *::before,
  .v2-refined *::after{
    scroll-behavior:auto!important;
  }
  .v2-refined .chapter.is-active::before{animation:none!important}
}

/* ==========================================================
   V2.1 — MOBILE FINISHING TOUCH LAYER
   Desktop V2.0 rules above are intentionally untouched.
   Mobile additions solve three narrow problems only:
   1) chapter handoff feels authored rather than stacked,
   2) touch controls feel tactile without hover dependence,
   3) media/proof gets the same subtle atmospheric finish as desktop.
   ========================================================== */

@media (max-width:900px){
  /* 01 — MOBILE SCENE HANDOFF
     Progressive enhancement only: JS adds .v2-mobile-motion.
     Without JS, content remains fully visible. */
  .v2-mobile-motion .chapter > .v2-mobile-reveal{
    opacity:0;
    transform:translate3d(0,12px,0);
    transition:opacity 420ms cubic-bezier(.22,.72,.16,1),transform 520ms cubic-bezier(.22,.72,.16,1);
    will-change:opacity,transform;
  }
  .v2-mobile-motion .chapter > .v2-mobile-reveal.is-v2-mobile-visible{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  /* A thin printed handoff at chapter starts. It never owns scrolling. */
  .v2-refined .chapter:not(.chapter--cover)::after{
    content:"";
    position:absolute;
    left:22px;
    top:66px;
    width:clamp(42px,16vw,76px);
    height:2px;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(90deg,var(--acid),var(--pink) 58%,transparent);
    opacity:.42;
  }
  .v2-refined .chapter--skincare::after{background:linear-gradient(90deg,var(--red),var(--pink) 58%,transparent)}
  .v2-refined .chapter--reviews::after{background:linear-gradient(90deg,var(--pink),var(--acid) 58%,transparent)}
  .v2-refined .chapter--visit::after{background:linear-gradient(90deg,var(--acid),var(--red) 58%,transparent)}

  /* 02 — TOUCH TACTILITY
     Active states only; no hover dependency and no navigation changes. */
  .v2-refined .cover-deck--nav button,
  .v2-refined .toc button,
  .v2-refined .service-ribbon,
  .v2-refined .text-link,
  .v2-refined .btn,
  .v2-refined .featured-product-controls button,
  .v2-refined .featured-product-media--button,
  .v2-refined .book-tab{
    -webkit-tap-highlight-color:transparent;
  }

  .v2-refined .cover-deck--nav button:active,
  .v2-refined .text-link:active,
  .v2-refined .btn:active{
    transform:translateY(1px) scale(.985);
  }

  .v2-refined .toc button{
    transition:transform 150ms ease,background 150ms ease,padding-left 150ms ease;
  }
  .v2-refined .toc button:active{
    transform:translateX(3px);
    background:rgba(234,165,181,.055);
  }

  .v2-refined .service-ribbon{
    transition:transform 150ms ease,box-shadow 150ms ease!important;
  }
  .v2-refined .service-ribbon:active{
    transform:rotate(-6.5deg) scale(.985)!important;
    box-shadow:5px 6px 0 var(--red)!important;
  }

  .v2-refined .featured-product-controls button{
    transition:transform 130ms ease,background 130ms ease,color 130ms ease;
  }
  .v2-refined .featured-product-controls button:active{
    transform:scale(.94);
    background:var(--ink);
    color:var(--paper);
  }

  .v2-refined .featured-product-media--button img{
    transition:transform 180ms cubic-bezier(.22,.72,.16,1),filter 180ms ease;
  }
  .v2-refined .featured-product-media--button:active img{
    transform:translateY(-2px) scale(1.012);
    filter:drop-shadow(0 24px 26px rgba(11,9,9,.18));
  }

  .v2-refined .book-tab{
    transition:transform 150ms ease,box-shadow 150ms ease,background 150ms ease;
  }
  .v2-refined .book-tab:active{
    transform:scale(.97);
    box-shadow:-5px 5px 0 rgba(0,0,0,.2);
  }

  /* 03 — MOBILE MEDIA / PROOF ATMOSPHERE
     Preserve geometry; improve integration only. */
  .v2-refined .service-photo-frame::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
      radial-gradient(circle at 48% 37%,transparent 0 40%,rgba(11,9,9,.09) 72%,rgba(11,9,9,.29) 100%),
      linear-gradient(180deg,rgba(234,165,181,.025),transparent 28%,transparent 72%,rgba(173,38,35,.055));
    mix-blend-mode:multiply;
  }

  .v2-refined .photo-label{
    box-shadow:3px 3px 0 rgba(173,38,35,.68);
  }

  .v2-refined .result-stack::before{
    inset:7% -2% 2%!important;
    background:
      radial-gradient(ellipse at 44% 40%,rgba(234,165,181,.085),transparent 48%),
      radial-gradient(ellipse at 72% 72%,rgba(173,38,35,.11),transparent 45%)!important;
    filter:blur(25px)!important;
    opacity:.9;
  }

  .v2-refined .chapter--results .result-card--video video{
    box-shadow:0 22px 46px rgba(0,0,0,.26),0 0 28px rgba(173,38,35,.04)!important;
  }
  .v2-refined .chapter--results .result-card--image img{
    box-shadow:0 18px 34px rgba(0,0,0,.23),0 0 22px rgba(234,165,181,.04)!important;
  }

  .v2-refined .featured-product-stage{
    position:relative;
    isolation:isolate;
  }
  .v2-refined .featured-product-stage::before{
    opacity:.56!important;
    box-shadow:0 0 0 18px rgba(165,216,70,.018),0 0 56px rgba(173,38,35,.065)!important;
  }

  /* Preserve the intentionally varied review collage while making touch
     feedback feel physical rather than animated. */
  .v2-refined .review-quote{
    transition:transform 150ms ease,box-shadow 150ms ease!important;
  }
  .v2-refined .review-quote:active{
    transform:translateY(1px) scale(.992)!important;
  }
}

@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .v2-mobile-motion .chapter > .v2-mobile-reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}