/* ============================================================
   Inshine Clinic — cinematic FX layer
   Feminine · luxury · cinematic.  Loads AFTER style.css.
   ============================================================ */
:root {
    --gold:      #c69c6d;
    --gold-lt:   #e7c79a;
    --gold-hi:   #fff3df;
    --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   Custom cursor (fine pointers only — toggled by JS via .has-cursor)
   ============================================================ */
.has-cursor,
.has-cursor a,
.has-cursor button,
.has-cursor .service-list__item { cursor: none; }

.cursor-dot,
.cursor-ring {
    position: fixed;
    top: 0; left: 0;
    z-index: 99999;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .5s ease;
    will-change: transform;
}
.has-cursor .cursor-dot,
.has-cursor .cursor-ring { opacity: 1; }

.cursor-dot {
    width: 7px; height: 7px;
    background: radial-gradient(circle, var(--gold-hi), var(--gold));
    box-shadow: 0 0 12px 2px rgba(214, 184, 138, .85);
}
.cursor-ring {
    width: 38px; height: 38px;
    border: 1.5px solid rgba(198, 156, 109, .65);
    box-shadow: 0 0 20px rgba(198, 156, 109, .22), inset 0 0 12px rgba(198, 156, 109, .12);
    transition: width .3s ease, height .3s ease, border-color .3s ease,
                background-color .3s ease, opacity .5s ease;
}
.cursor-ring.is-hover {
    width: 66px; height: 66px;
    border-color: rgba(231, 199, 154, .95);
    background-color: rgba(214, 184, 138, .08);
}
.cursor-ring.is-down { width: 26px; height: 26px; }

@media (hover: none), (pointer: coarse) {
    .cursor-dot, .cursor-ring { display: none; }
}

/* ============================================================
   Ambient cinematic overlays (fixed, click-through)
   ============================================================ */
.fx-overlay { position: fixed; inset: 0; pointer-events: none; }

.fx-spotlight {
    z-index: 9991;
    background: radial-gradient(circle 460px at var(--cx, 50%) var(--cy, 38%),
                rgba(231, 199, 154, .17), transparent 66%);
    mix-blend-mode: screen;
    transition: opacity .6s ease;
}
.fx-vignette {
    z-index: 9992;
    background: radial-gradient(ellipse 118% 100% at 50% 42%, transparent 50%, rgba(46, 17, 2, .34) 100%);
    mix-blend-mode: multiply;
}
.fx-grain {
    z-index: 9993;
    inset: -12%;
    background-image: var(--noise);
    background-size: 150px 150px;
    opacity: .045;
    mix-blend-mode: overlay;
    animation: fxGrain 1.1s steps(5) infinite;
}
@keyframes fxGrain {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-4%, 3%); }
    50%  { transform: translate(3%, -4%); }
    75%  { transform: translate(-3%, 2%); }
    100% { transform: translate(2%, -3%); }
}

/* Floating golden dust — canvas lives inside the pinned stage */
.fx-particles {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;   /* canvas is replaced — needs explicit size to fill */
    z-index: 30;            /* over the scene, under header(40)/footer(35) */
    pointer-events: none;
}

/* ============================================================
   Cinematic loader / intro
   ============================================================ */
.loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 38%, #3c1606 0%, #200b02 62%, #160701 100%);
    transition: opacity 1s ease, visibility 1s ease;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__inner { display: grid; justify-items: center; gap: 30px; }
.loader__logo {
    width: min(44vw, 240px);
    aspect-ratio: 1;
    -webkit-mask: url("../img/Logo.svg") center / contain no-repeat;
            mask: url("../img/Logo.svg") center / contain no-repeat;
    background: linear-gradient(120deg, #8a5e34 18%, var(--gold-lt) 44%, var(--gold-hi) 50%, var(--gold-lt) 56%, #8a5e34 82%);
    background-size: 250% 100%;
    animation: fxLogoShine 3.4s ease-in-out infinite;
}
@keyframes fxLogoShine {
    0%   { background-position: 130% 0; }
    100% { background-position: -30% 0; }
}
.loader__bar {
    width: 150px; height: 2px;
    background: rgba(231, 199, 154, .18);
    border-radius: 2px;
    overflow: hidden;
}
.loader__bar span {
    display: block;
    height: 100%; width: 42%;
    background: linear-gradient(90deg, transparent, var(--gold-lt), transparent);
    animation: fxBar 1.5s ease-in-out infinite;
}
@keyframes fxBar {
    0%   { transform: translateX(-130%); }
    100% { transform: translateX(330%); }
}

/* ============================================================
   Headline — gold shimmer + cinematic blur-in
   ============================================================ */
.headline {
    background: linear-gradient(100deg,
        #4a1600 36%, #9a6432 46%, var(--gold-lt) 50%, #9a6432 54%, #4a1600 64%);
    background-size: 230% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    /* keep the scroll-driven movement, add mouse parallax via --mx/--my */
    transform: translate(calc(-50% + var(--mx, 0px)),
                         calc(-50% - var(--p) * 4vh + var(--my, 0px)))
               scale(calc(1 - var(--p) * .05));
    animation: fxHeadlineShine 7.5s linear infinite;
}
@keyframes fxHeadlineShine {
    0%   { background-position: 125% 0; }
    100% { background-position: -65% 0; }
}

/* ============================================================
   Entrance choreography — triggered when body gets .is-ready
   ============================================================ */
.girl, .flowers { opacity: 0; }                 /* hidden until revealed */
.is-ready .girl    { animation: fxRise 1.5s cubic-bezier(.2,.7,.3,1) .35s both; }
.is-ready .flowers { animation: fxRiseF 1.7s cubic-bezier(.2,.7,.3,1) .15s both; }
@keyframes fxRise  { from { opacity: 0; filter: blur(14px); } to { opacity: 1;  filter: blur(0); } }
@keyframes fxRiseF { from { opacity: 0; filter: blur(16px); } to { opacity: .95; filter: blur(0); } }

/* Blur-in only animates `filter` (not opacity) so the scroll-driven fade keeps working.
   `backwards` holds the blurred state during the delay to avoid a sharp flash. */
.is-ready .headline { animation: fxHeadlineShine 7.5s linear infinite, fxBlurIn 1.6s ease-out .55s backwards; }
@keyframes fxBlurIn { from { filter: blur(22px); } to { filter: blur(0); } }

.brand, .topbar__link { opacity: 0; }
.is-ready .brand        { animation: fxFade 1.1s ease .15s both; }
.is-ready .topbar__link { animation: fxDrop 1s ease both; }
.is-ready .topbar__link--book { animation-delay: .5s; }
.is-ready .topbar__link--file { animation-delay: .65s; }
.is-ready .contact      { animation: fxFade 1.2s ease 1s both; }
.is-ready .scroll-cue   { animation: fxFade 1.2s ease 1.4s both; }
@keyframes fxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxDrop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   Chapter navigator (right edge) — desktop only
   ============================================================ */
.chapters {
    position: fixed;
    right: clamp(14px, 1.8vw, 30px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 9994;
    display: flex;
    flex-direction: column;
    gap: 20px;
    opacity: 0;
}
.is-ready .chapters { animation: fxFade 1s ease 1.6s both; }
.chapters__dot {
    position: relative;
    width: 12px; height: 12px;
    padding: 0;
    border: 1.5px solid rgba(123, 52, 19, .5);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}
.chapters__dot::before {
    content: "";
    position: absolute; inset: 2.5px;
    border-radius: 50%;
    background: var(--gold);
    transform: scale(0);
    transition: transform .3s ease;
}
.chapters__dot.is-active { border-color: var(--brown); transform: scale(1.25); }
.chapters__dot.is-active::before { transform: scale(1); }
.chapters__dot span {
    position: absolute;
    right: 22px; top: 50%;
    transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    font-family: "Tharwat Emara", serif;
    font-size: 16px;
    color: var(--brown);
    background: rgba(247, 239, 228, .85);
    padding: 2px 10px;
    border-radius: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
.chapters__dot:hover span { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 820px), (orientation: portrait) {
    .chapters { display: none; }
}

/* ============================================================
   Micro-interactions
   ============================================================ */
/* top links — gold underline draw */
.topbar__link { position: relative; }
.topbar__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -5px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: scaleX(0);
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.topbar__link:hover::after { transform: scaleX(1); }

/* media box — slow diagonal light sweep + soft gold ring */
.media-box { box-shadow: 0 30px 60px -30px rgba(91,27,0,.5), 0 0 0 1px rgba(214,184,138,.25); }
.media-box::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 42%, rgba(255, 243, 223, .16) 50%, transparent 58%);
    transform: translateX(-130%);
    animation: fxSweep 6.5s ease-in-out 1.5s infinite;
}
@keyframes fxSweep { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }

/* contact-us icons — soft glow on hover */
.contact-us__item a:hover .contact-us__icon {
    box-shadow: 0 0 0 4px rgba(214, 184, 138, .18), 0 6px 18px -6px rgba(91, 27, 0, .5);
}
.contact-us__icon { transition: box-shadow .3s ease; }

/* gentle float for the flowers once revealed */
.is-ready .flowers { animation: fxRiseF 1.7s cubic-bezier(.2,.7,.3,1) .15s both,
                                 fxFloat 9s ease-in-out 2s infinite; }
@keyframes fxFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -1.4vh; }
}

/* Reduced-motion handling intentionally disabled — the cinematic FX always play. */