/* ==========================================================================
   Wildcore Retreats — Intro & page transition
   Two curtains, one language:
   1. .wc-intro   the first arrival of a session — logo, wordmark, a trail
                  that draws itself. Roughly 2.6s, then it lifts away.
   2. .wc-swipe   moving between pages (language switch). Under a second,
                  same materials, different gesture.
   ========================================================================== */

.wc-intro,
.wc-swipe{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;
}

/* keep the page still while the intro runs */
html.wc-intro-on,
html.wc-intro-on body{overflow:hidden;}

/* ------------------------------------------------------------- the intro -- */
.wc-intro{
    background:
        radial-gradient(120% 90% at 50% 42%, #fdf9f0 0%, var(--cream,#f8f2e6) 46%, #efe5d2 100%);
    pointer-events:all;
    transform:translateY(0);
    border-bottom-left-radius:0;border-bottom-right-radius:0;
    transition:transform 820ms cubic-bezier(.76,0,.24,1),
               border-radius 820ms cubic-bezier(.76,0,.24,1);
    will-change:transform;
}
/* a warm grain so the cream doesn't read as flat white */
.wc-intro::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(63,74,52,.16) 1px, transparent 1px);
    background-size:4px 4px;opacity:.24;mix-blend-mode:multiply;
}
.wc-intro.is-out{
    transform:translateY(-102%);
    border-bottom-left-radius:46% 22%;
    border-bottom-right-radius:46% 22%;
}

.wc-intro-inner{
    position:relative;z-index:1;
    display:flex;flex-direction:column;align-items:center;
    padding:0 26px;text-align:center;
    animation:wcIntroLift 820ms cubic-bezier(.76,0,.24,1) forwards;
    animation-play-state:paused;
}
.wc-intro.is-out .wc-intro-inner{animation-play-state:running;}
@keyframes wcIntroLift{
    to{transform:translateY(-16px);opacity:0;}
}

/* the mark ---------------------------------------------------------------- */
.wc-intro-mark{
    width:96px;height:96px;border-radius:50%;
    opacity:0;transform:scale(.72) translateY(10px);
    filter:drop-shadow(0 16px 26px rgba(43,42,34,.22));
    animation:wcMarkIn 1000ms cubic-bezier(.22,1,.36,1) 120ms forwards;
}
@keyframes wcMarkIn{
    60% {opacity:1;transform:scale(1.04) translateY(0);}
    100%{opacity:1;transform:scale(1) translateY(0);}
}
/* one slow ring leaving the mark, like a stone in the pool */
.wc-intro-ring{
    position:absolute;top:48px;left:50%;width:96px;height:96px;
    margin:-48px 0 0 -48px;border-radius:50%;
    border:1.5px solid rgba(189,95,49,.5);
    opacity:0;animation:wcRing 1700ms cubic-bezier(.22,1,.36,1) 560ms forwards;
}
@keyframes wcRing{
    0%  {opacity:.65;transform:scale(1);}
    100%{opacity:0;transform:scale(2.6);}
}

/* the wordmark ------------------------------------------------------------ */
.wc-intro-word{
    display:flex;margin-top:22px;
    font-family:'Fraunces',Georgia,serif;font-weight:600;
    font-size:clamp(1.6rem,6.2vw,2.5rem);letter-spacing:.26em;
    color:var(--green-deep,#3f4a34);
    padding-left:.26em; /* balance the trailing letter-space */
}
.wc-intro-word span{
    display:inline-block;opacity:0;transform:translateY(18px);
    animation:wcLetter 720ms cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes wcLetter{
    to{opacity:1;transform:translateY(0);}
}

/* the trail --------------------------------------------------------------- */
.wc-intro-route{
    width:min(340px,74vw);height:auto;margin-top:14px;overflow:visible;
}
.wc-intro-ridge{
    fill:rgba(167,155,110,.22);
    opacity:0;animation:wcFade 900ms ease 240ms forwards;
}
.wc-intro-line{
    fill:none;stroke:var(--terracotta,#bd5f31);stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:420;stroke-dashoffset:420;
    animation:wcDraw 1500ms cubic-bezier(.5,0,.2,1) 620ms forwards;
}
.wc-intro-line-soft{
    fill:none;stroke:var(--terracotta,#bd5f31);stroke-width:7;opacity:.14;
    stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:420;stroke-dashoffset:420;
    animation:wcDraw 1500ms cubic-bezier(.5,0,.2,1) 620ms forwards;
}
@keyframes wcDraw{to{stroke-dashoffset:0;}}
.wc-intro-dot{
    fill:var(--green-deep,#3f4a34);
    stroke:var(--cream,#f8f2e6);stroke-width:2.5;
    opacity:0;animation:wcFade 300ms ease 620ms forwards;
}
@keyframes wcFade{to{opacity:1;}}

/* the line ---------------------------------------------------------------- */
.wc-intro-tag{
    margin:16px 0 0;
    font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;
    font-size:clamp(.92rem,3.4vw,1.08rem);color:var(--green-mid,#5c6b48);
    opacity:0;transform:translateY(8px);
    animation:wcTagIn 800ms cubic-bezier(.22,1,.36,1) 1240ms forwards;
}
@keyframes wcTagIn{
    to{opacity:.92;transform:translateY(0);}
}

/* ------------------------------------------------- the page-to-page swipe -- */
/* A single warm panel that slides across, carrying the mark and a short
   trail. It leaves in the same direction it arrived, so the two pages feel
   like one continuous move. */
.wc-swipe{
    background:var(--green-deep,#3f4a34);
    transform:translateY(100%);
    will-change:transform;
}
.wc-swipe::before{
    content:"";position:absolute;left:0;right:0;top:-1px;height:40px;
    background:var(--green-deep,#3f4a34);
    border-radius:50% 50% 0 0 / 100% 100% 0 0;transform:translateY(-38px);
}
.wc-swipe.is-covering{
    transform:translateY(0);
    transition:transform 460ms cubic-bezier(.7,0,.3,1);
    pointer-events:all;
}
/* arriving on the next page: the panel is already down and slides off the top */
.wc-swipe.is-arriving{transform:translateY(0);pointer-events:all;}
.wc-swipe.is-leaving{
    transform:translateY(-100%);
    transition:transform 620ms cubic-bezier(.76,0,.24,1);
}
.wc-swipe.is-leaving::before{opacity:0;}

.wc-swipe-badge{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;
    opacity:0;transform:translateY(8px);
    transition:opacity 260ms ease,transform 260ms ease;
}
.wc-swipe.is-covering .wc-swipe-badge,
.wc-swipe.is-arriving .wc-swipe-badge{opacity:1;transform:translateY(0);}
.wc-swipe.is-leaving .wc-swipe-badge{opacity:0;transform:translateY(-8px);}
.wc-swipe-badge img{
    width:56px;height:56px;border-radius:50%;
    animation:wcBadgeBreathe 1400ms ease-in-out infinite;
}
@keyframes wcBadgeBreathe{
    0%,100%{transform:scale(1);}
    50%    {transform:scale(1.06);}
}
.wc-swipe-track{
    width:132px;height:2px;border-radius:2px;
    background:rgba(248,242,230,.22);overflow:hidden;
}
.wc-swipe-track i{
    display:block;width:40%;height:100%;border-radius:2px;
    background:var(--terracotta,#bd5f31);
    animation:wcTrack 900ms cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes wcTrack{
    0%  {transform:translateX(-110%);}
    100%{transform:translateX(360%);}
}

/* ------------------------------------------------------------- restraint -- */
@media (prefers-reduced-motion: reduce){
    .wc-intro,.wc-intro *,
    .wc-swipe,.wc-swipe *{animation:none!important;transition:none!important;}
    .wc-intro-mark,.wc-intro-word span,.wc-intro-tag,
    .wc-intro-ridge,.wc-intro-dot{opacity:1;transform:none;}
    .wc-intro-line,.wc-intro-line-soft{stroke-dashoffset:0;}
    .wc-intro.is-out{display:none;}
    .wc-swipe{display:none;}
}