/*
Theme Name: Neonika
Theme URI: http://example.com/neonika
Author: Narek
Author URI: http://example.com
Description: Neonika
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: neonika
*/

:root {
    /* Where a full-bleed video or overlay meets the page it has to dissolve into the starfield
       instead of ending on a straight line. This is a MASK, not a colour overlay: the field is a
       fixed stage at z-index -1 behind everything, so fading to the page colour would blank the
       stars in exactly the band we want them showing through.

       The ramp is eased rather than linear - a plain linear fade is visible as a faint edge where
       it starts, which is the same seam one step higher up.

       Length is min(30vh, 40%) so it reads the same on a 100vh hero and on a full-page background:
       the vh term rules on tall elements, the % term keeps it proportional on short ones. */
    --sky-fade-length: min(30vh, 40%);
    --sky-fade: linear-gradient(to bottom,
        #000 calc(100% - var(--sky-fade-length)),
        rgba(0, 0, 0, 0.92) calc(100% - var(--sky-fade-length) * 0.78),
        rgba(0, 0, 0, 0.62) calc(100% - var(--sky-fade-length) * 0.52),
        rgba(0, 0, 0, 0.28) calc(100% - var(--sky-fade-length) * 0.28),
        rgba(0, 0, 0, 0.07) calc(100% - var(--sky-fade-length) * 0.10),
        transparent 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: #101237;
    overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}



body {
    width: 100%;
    height: 100%;
    color: #fff;
    margin: 0;
    /* Must stay transparent. The html rule above already paints the navy, and while html had no
       background of its own the body colour propagated to the canvas (painted below everything),
       so full-page layers sitting at z-index:-1 stayed visible. Giving html a background stopped
       that propagation, which makes an opaque body paint its own box ABOVE those layers and hide
       them - it is what blanked the contact-page video and the 404 background. Set the page colour
       on html, never here. */
    background: transparent;
    overscroll-behavior: none;
}

/* Starfield on inner pages (body class from neonika_body_classes(), sparks markup in header.php).
   This replaces .stars-parallax-layer, removed in 71fc7d1 because it was position:fixed +
   will-change:transform,opacity + an infinite opacity animation on a viewport-sized element - a
   promoted compositing layer that desynced from the scrolling content and flashed white, then black.

   Two decisions keep that from being possible again:
     - the FIELD is painted by the html ROOT, not by an element. A root background covers the whole
       canvas with no DOM node, nothing to promote, and - crucially - no need for
       `body { position: relative }`, which re-anchors the absolutely-positioned .site-breadcrumb and
       shifts it 32px once the admin bar adds html{margin-top}.
     - the TWINKLE is on ~16 individual 2-3px sparks, each its own tiny fixed element. A promoted
       layer that size costs nothing; a page-sized animated one costs a texture per frame.

   The field itself is 16 radial-gradient pinpoints over three coprime-ish tile scales, so the pattern
   only repeats after ~168 million px and the size/alpha ramp reads as depth. Brightness is baked into
   each star's alpha, so nothing needs a layer opacity and the stars stay crisp. Zero requests. */

/* ============================================================================
   Starfield (markup in header.php, gated by neonika_starfield_pages()).

   Structure matters here. `.stars` is a fixed stage that is NEVER animated and that
   clips; the three depth layers are children and are the things that move. That is the
   guard against 71fc7d1, where a fixed, will-change-promoted layer desynced from the
   scrolling content and let its own EDGE slide into view, flashing white then black.
   With overflow:hidden on a static stage a layer edge cannot be shown even in principle,
   and the -25% overscan (larger than the biggest displacement, -24%) means the layers
   still cover the stage at both scroll extremes.

   Parallax is a CSS scroll timeline, not a scroll handler. Browsers scroll asynchronously,
   so the compositor knows the new offset before the main thread does and any JS-applied
   transform is permanently one frame stale - that staleness IS the old flash. A scroll
   timeline is evaluated on the compositor in the same frame as the scroll, so there is no
   stale offset to reveal an edge. Firefox stable still has scroll timelines behind a flag,
   so assets/js/stars.js attaches a GSAP ScrollTrigger fallback there (GSAP already loads
   on these pages, so it costs no payload).

   Stars are drawn as point-spread functions - bright core, long faint halo, fading to the
   SAME hue at alpha 0. Never a hard stop and never a sub-pixel radius: CSS hard stops are
   not anti-aliased in Skia, and a 0.8px radius has no pixel budget to shade, which is
   exactly what made the previous field read as grains of sand. Minimum radius here is 3px.
   ============================================================================ */
.stars {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.stars__layer {
    position: absolute;
    /* Overscan, as a % of the stage. Must stay >= the largest drift in vh below (18vh here).
       Both are measured against the viewport, so the invariant holds at every viewport size. */
    inset: -25% 0;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}




/* The whole sky turns together. Every star layer rotates at the SAME rate as the flickering
   stars: one sky, one rotation. Different rates per layer would read as wrong, and it is also the
   textbook moire setup - several periodic star lattices in relative rotation produce an interference
   pattern that beats faster than either grid. Rotating rigidly together, there is no relative motion
   between them and no beating. Depth comes from the scroll parallax and the size/brightness ramp
   instead.

   The rotation lives on this child, not on .stars__layer: the layer owns the scroll parallax, and
   this owns the spin, so the two transforms compose instead of one overwriting the other.

   Sized to the viewport diagonal PLUS the parallax travel (2 x 18vh), because the parent translates
   this whole box before it is rotated - the diagonal alone would uncover a corner at full scroll. */
.stars__spin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 190vmax;
    height: 190vmax;
    width: calc(1px * hypot(100vw / 1px, 100vh / 1px) + 44vh);
    height: calc(1px * hypot(100vw / 1px, 100vh / 1px) + 44vh);
    margin-left: -95vmax;
    margin-top: -95vmax;
    margin-left: calc(-0.5px * hypot(100vw / 1px, 100vh / 1px) - 22vh);
    margin-top: calc(-0.5px * hypot(100vw / 1px, 100vh / 1px) - 22vh);
    background-repeat: repeat;
    background-blend-mode: screen;
    animation: starsCelestial 600s linear infinite;
}

.stars__spin--far {

    background-image:

        radial-gradient(circle 4.0px at 67.0% 18.5%, rgba(236,244,255,0.312) 0%, rgba(236,244,255,0.196) 9%, rgba(236,244,255,0.084) 22%, rgba(236,244,255,0.030) 44%, rgba(236,244,255,0.009) 68%, rgba(236,244,255,0.000) 100%),

        radial-gradient(circle 4.4px at 58.8% 10.8%, rgba(236,244,255,0.438) 0%, rgba(236,244,255,0.276) 9%, rgba(236,244,255,0.118) 22%, rgba(236,244,255,0.042) 44%, rgba(236,244,255,0.013) 68%, rgba(236,244,255,0.000) 100%),

        radial-gradient(circle 3.3px at 87.5% 33.8%, rgba(214,233,255,0.305) 0%, rgba(214,233,255,0.192) 9%, rgba(214,233,255,0.082) 22%, rgba(214,233,255,0.029) 44%, rgba(214,233,255,0.009) 68%, rgba(214,233,255,0.000) 100%),

        radial-gradient(circle 4.9px at 34.4% 3.3%, rgba(214,233,255,0.305) 0%, rgba(214,233,255,0.192) 9%, rgba(214,233,255,0.082) 22%, rgba(214,233,255,0.029) 44%, rgba(214,233,255,0.009) 68%, rgba(214,233,255,0.000) 100%),

        radial-gradient(circle 4.3px at 53.4% 46.4%, rgba(198,222,255,0.326) 0%, rgba(198,222,255,0.205) 9%, rgba(198,222,255,0.088) 22%, rgba(198,222,255,0.031) 44%, rgba(198,222,255,0.010) 68%, rgba(198,222,255,0.000) 100%),

        radial-gradient(circle 4.5px at 36.8% 71.8%, rgba(198,222,255,0.338) 0%, rgba(198,222,255,0.213) 9%, rgba(198,222,255,0.091) 22%, rgba(198,222,255,0.032) 44%, rgba(198,222,255,0.010) 68%, rgba(198,222,255,0.000) 100%),

        radial-gradient(circle 3.5px at 9.8% 50.5%, rgba(214,233,255,0.302) 0%, rgba(214,233,255,0.190) 9%, rgba(214,233,255,0.082) 22%, rgba(214,233,255,0.029) 44%, rgba(214,233,255,0.009) 68%, rgba(214,233,255,0.000) 100%),

        radial-gradient(circle 4.9px at 59.5% 29.7%, rgba(236,244,255,0.300) 0%, rgba(236,244,255,0.189) 9%, rgba(236,244,255,0.081) 22%, rgba(236,244,255,0.029) 44%, rgba(236,244,255,0.009) 68%, rgba(236,244,255,0.000) 100%),

        radial-gradient(circle 4.6px at 65.6% 18.5%, rgba(214,233,255,0.424) 0%, rgba(214,233,255,0.267) 9%, rgba(214,233,255,0.115) 22%, rgba(214,233,255,0.040) 44%, rgba(214,233,255,0.013) 68%, rgba(214,233,255,0.000) 100%),

        radial-gradient(circle 3.9px at 52.1% 88.5%, rgba(255,240,218,0.307) 0%, rgba(255,240,218,0.193) 9%, rgba(255,240,218,0.083) 22%, rgba(255,240,218,0.029) 44%, rgba(255,240,218,0.009) 68%, rgba(255,240,218,0.000) 100%);

    background-size:

        293px 293px,

        293px 293px,

        293px 293px,

        293px 293px,

        337px 337px,

        337px 337px,

        337px 337px,

        383px 383px,

        383px 383px,

        383px 383px;

}



.stars__spin--mid {

    background-image:

        radial-gradient(circle 7.3px at 36.0% 91.3%, rgba(255,240,218,0.582) 0%, rgba(255,240,218,0.367) 9%, rgba(255,240,218,0.157) 22%, rgba(255,240,218,0.055) 44%, rgba(255,240,218,0.017) 68%, rgba(255,240,218,0.000) 100%),

        radial-gradient(circle 6.1px at 30.7% 14.4%, rgba(255,240,218,0.694) 0%, rgba(255,240,218,0.437) 9%, rgba(255,240,218,0.187) 22%, rgba(255,240,218,0.066) 44%, rgba(255,240,218,0.021) 68%, rgba(255,240,218,0.000) 100%),

        radial-gradient(circle 6.9px at 77.4% 29.2%, rgba(214,233,255,0.560) 0%, rgba(214,233,255,0.353) 9%, rgba(214,233,255,0.151) 22%, rgba(214,233,255,0.053) 44%, rgba(214,233,255,0.017) 68%, rgba(214,233,255,0.000) 100%),

        radial-gradient(circle 7.3px at 65.4% 31.8%, rgba(214,233,255,0.792) 0%, rgba(214,233,255,0.499) 9%, rgba(214,233,255,0.214) 22%, rgba(214,233,255,0.075) 44%, rgba(214,233,255,0.024) 68%, rgba(214,233,255,0.000) 100%),

        radial-gradient(circle 7.6px at 28.7% 72.9%, rgba(198,222,255,0.563) 0%, rgba(198,222,255,0.355) 9%, rgba(198,222,255,0.152) 22%, rgba(198,222,255,0.054) 44%, rgba(198,222,255,0.017) 68%, rgba(198,222,255,0.000) 100%),

        radial-gradient(circle 5.9px at 76.6% 87.6%, rgba(214,233,255,0.699) 0%, rgba(214,233,255,0.440) 9%, rgba(214,233,255,0.189) 22%, rgba(214,233,255,0.066) 44%, rgba(214,233,255,0.021) 68%, rgba(214,233,255,0.000) 100%),

        radial-gradient(circle 6.8px at 11.3% 42.6%, rgba(236,244,255,0.593) 0%, rgba(236,244,255,0.374) 9%, rgba(236,244,255,0.160) 22%, rgba(236,244,255,0.056) 44%, rgba(236,244,255,0.018) 68%, rgba(236,244,255,0.000) 100%),

        radial-gradient(circle 7.6px at 95.8% 59.7%, rgba(236,244,255,0.555) 0%, rgba(236,244,255,0.350) 9%, rgba(236,244,255,0.150) 22%, rgba(236,244,255,0.053) 44%, rgba(236,244,255,0.017) 68%, rgba(236,244,255,0.000) 100%);

    background-size:

        431px 431px,

        431px 431px,

        431px 431px,

        487px 487px,

        487px 487px,

        487px 487px,

        541px 541px,

        541px 541px;

}



.stars__spin--near {

    background-image:

        radial-gradient(circle 13.1px at 13.0% 9.1%, rgba(236,244,255,0.855) 0%, rgba(236,244,255,0.539) 9%, rgba(236,244,255,0.231) 22%, rgba(236,244,255,0.081) 44%, rgba(236,244,255,0.026) 68%, rgba(236,244,255,0.000) 100%),

        radial-gradient(circle 11.1px at 12.2% 20.5%, rgba(236,244,255,0.936) 0%, rgba(236,244,255,0.590) 9%, rgba(236,244,255,0.253) 22%, rgba(236,244,255,0.089) 44%, rgba(236,244,255,0.028) 68%, rgba(236,244,255,0.000) 100%),

        radial-gradient(circle 8.2px at 41.5% 27.3%, rgba(236,244,255,0.853) 0%, rgba(236,244,255,0.537) 9%, rgba(236,244,255,0.230) 22%, rgba(236,244,255,0.081) 44%, rgba(236,244,255,0.026) 68%, rgba(236,244,255,0.000) 100%),

        radial-gradient(circle 11.3px at 14.5% 93.2%, rgba(198,222,255,0.912) 0%, rgba(198,222,255,0.574) 9%, rgba(198,222,255,0.246) 22%, rgba(198,222,255,0.087) 44%, rgba(198,222,255,0.027) 68%, rgba(198,222,255,0.000) 100%),

        radial-gradient(circle 13.8px at 43.7% 32.5%, rgba(236,244,255,0.854) 0%, rgba(236,244,255,0.538) 9%, rgba(236,244,255,0.231) 22%, rgba(236,244,255,0.081) 44%, rgba(236,244,255,0.026) 68%, rgba(236,244,255,0.000) 100%),

        radial-gradient(circle 12.4px at 21.9% 58.0%, rgba(198,222,255,0.863) 0%, rgba(198,222,255,0.544) 9%, rgba(198,222,255,0.233) 22%, rgba(198,222,255,0.082) 44%, rgba(198,222,255,0.026) 68%, rgba(198,222,255,0.000) 100%);

    background-size:

        761px 761px,

        761px 761px,

        853px 853px,

        853px 853px,

        947px 947px,

        947px 947px;

}



/* Haze. A blurred SOLID disc, not a gradient. Two rounds were lost to this: a big low-alpha
   radial-gradient spans only ~8 distinct 8-bit values across its falloff and renders as
   concentric rings, and blurring one does not fully erase them because the band spacing is
   wider than the blur radius. A solid fill has nothing to quantise, so letting blur() produce
   the entire falloff gives a genuinely smooth glow. Constant blur on a static element:
   rasterised once, then only translated with its layer - never animate a blur, it is very
   expensive and worst in Safari. */
.stars__haze {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .5;
}

.stars__haze--a {
    top: 6%; left: 8%; width: 46%; height: 30%;
    background: rgba(96, 84, 196, .30);
}

.stars__haze--b {
    top: 52%; left: 58%; width: 40%; height: 26%;
    background: rgba(64, 108, 190, .26);
}

/* Grain. Not decoration - it is a dither, and it is the only thing that removes the concentric
   contour rings a large blur leaves behind. Measured: the rings survive as a solid disc, survive at
   half alpha, and survive across three offset discs, because they come from Skia downsampling a
   large-radius blur rather than from the source shape. A ~3% noise tile breaks the contours up and
   is itself invisible at this amplitude. Shipped as a 5KB file rather than inlined, so it does not
   grow the render-blocking stylesheet, and static rather than parallaxed - film grain sits on the
   screen, not in the scene. */
.stars__grain {
    position: absolute;
    inset: 0;
    background-image: url("assets/images/star-noise.png");
    background-repeat: repeat;
    background-size: 96px 96px;
    /* Dialled back 10% after review: at full strength it reads as pixelation rather than grain. */
    opacity: .9;
    pointer-events: none;
}

/* Flickering stars. The tiled gradient field above is painted as backgrounds, so its stars
   cannot flicker individually - these are real elements layered over it, and they are the bright
   foreground. Only bright stars visibly scintillate in a real sky, so the gradient dust stays
   static on purpose; that is the cheapest realism there is.

   The flicker is an animated box-shadow SPREAD rather than opacity (borrowed from the reference
   pen): the glow pulses, which is what reads as scintillation instead of blinking. Roughly one in
   four also shifts warm/cool, which is the chromatic part of real scintillation. Durations are
   short and varied with a NEGATIVE delay per star, so phases are scattered and nothing pops in
   unison on load. Keyframes are asymmetric on purpose - real scintillation dwells near its
   baseline and brightens briefly. */
.stars__live {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Sized to the viewport DIAGONAL so the square still covers the screen at every angle of the
       rotation below. A percentage overscan cannot work: the required amount is worst on the SHORT
       axis, and which axis that is flips between desktop and phone. hypot() is exact; the vmax
       fallback is sqrt(2)*100, which is always at least the diagonal. */
    width: 190vmax;
    height: 190vmax;
    width: calc(1px * hypot(100vw / 1px, 100vh / 1px) + 44vh);
    height: calc(1px * hypot(100vw / 1px, 100vh / 1px) + 44vh);
    margin-left: -95vmax;
    margin-top: -95vmax;
    margin-left: calc(-0.5px * hypot(100vw / 1px, 100vh / 1px) - 22vh);
    margin-top: calc(-0.5px * hypot(100vw / 1px, 100vh / 1px) - 22vh);
    /* Animates `rotate`, NOT `transform`. Two animations both targeting `transform` do not compose
       - the last in the animation-name list wins outright - whereas the individual transform
       properties compose in a fixed order (translate, then rotate, then scale). That is what lets
       the scroll parallax and this rotation coexist. The tiled layers deliberately do NOT rotate:
       a repeating star lattice moving rigidly reads as a turntable, and several tiled layers
       turning at different rates is a textbook moire setup. DOM stars have no lattice. */
    animation: starsCelestial 600s linear infinite;
}

@keyframes starsCelestial {
    to { rotate: 360deg; }
}

.stars__star {
    position: absolute;
    width: var(--s, 2px);
    height: var(--s, 2px);
    border-radius: 50%;
    background: #fff;
    /* The glow is STATIC and the flicker animates opacity + scale instead. The reference pulses the
       box-shadow spread, which looks right but is a paint property: re-blurring 150 shadows every
       frame measured p95 106-114ms with 4-7 frames over 50ms on the About page. Fading and scaling
       the star with its glow baked in is visually equivalent, and measured p95 35-42ms with 1 long
       frame - indistinguishable from having no starfield at all. */
    box-shadow: 0 0 7px 1.2px rgba(214, 232, 255, .30);
    opacity: var(--o, .7);
    animation: starsScint var(--dur, 2s) ease-in-out var(--dly, 0s) infinite;
}

.stars__star--chroma {
    animation-name: starsScintChroma;
}

/* Asymmetric on purpose: real scintillation dwells near a baseline and brightens briefly, so these
   sit low for the first 44% and then flare twice at uneven intervals. */
@keyframes starsScint {
    0%, 44%, 100% { opacity: calc(var(--o) * .58); scale: .80; }
    56%           { opacity: var(--o);             scale: 1.06; }
    63%           { opacity: calc(var(--o) * .70); scale: .88; }
    76%           { opacity: calc(var(--o) * 1.04); scale: 1.15; }
    88%           { opacity: calc(var(--o) * .74); scale: .90; }
}

/* Roughly one in four also shifts warm then cool, which is the chromatic half of real
   scintillation. background-color is a paint, but on a 2-3px dot with no blur it is trivial. */
@keyframes starsScintChroma {
    0%, 100% { opacity: calc(var(--o) * .60); scale: .82; background-color: #fff; }
    26%      { opacity: var(--o);             scale: 1.10; background-color: #ffdede; }
    48%      { opacity: calc(var(--o) * .66); scale: .88; background-color: #fff; }
    72%      { opacity: calc(var(--o) * 1.03); scale: 1.12; background-color: #dde5ff; }
    90%      { opacity: calc(var(--o) * .72); scale: .92; background-color: #fff; }
}

/* Comet. Parent aims, child travels: a single element cannot do both with the individual transform
   properties, because `translate` is applied outermost and so resolves in screen space. Idle by
   default with NO animation attached - stars.js adds .is-active on a randomised timer and removes
   it on animationend, so nothing ticks between events. A long CSS period with a tiny active window
   would leave animations running forever to be visible a few percent of the time. */
.stars__comet {
    position: absolute;
    top: var(--top, 18%);
    left: var(--left, 62%);
    width: 0;
    height: 0;
    rotate: var(--angle, 208deg);
    opacity: 0;
}

.stars__comet-body {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--len, 150px);
    height: 2px;
    transform-origin: 0 50%;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(226, 240, 255, .38) 58%,
        rgba(255, 255, 255, .85) 100%);
    /* Collapse the tail to a point. A constant-width gradient tail is the tell that it is a
       sliding line rather than a meteor. */
    -webkit-mask-image: radial-gradient(closest-side at 100% 50%, #000 0%, rgba(0, 0, 0, .12) 100%);
    mask-image: radial-gradient(closest-side at 100% 50%, #000 0%, rgba(0, 0, 0, .12) 100%);
    border-radius: 2px;
}

/* The travel animation MUST live on the child, not on .stars__comet itself. The individual
   transform properties apply in a fixed order - translate, then rotate, then scale - so `translate`
   is outermost and resolves in SCREEN space. Put both the aim and the travel on one element and the
   comet is drawn at its angle but slides horizontally. On the child, `translate` resolves inside
   the parent's already-rotated frame, which is what sends it along its own axis. */
.stars__comet.is-active {
    animation: starsCometFade var(--flight, 1s) linear forwards;
}

.stars__comet.is-active .stars__comet-body {
    animation: starsCometFly var(--flight, 1s) cubic-bezier(.15, .6, .4, 1) forwards;
}

@keyframes starsCometFade {
    0%   { opacity: 0; }
    12%  { opacity: .85; }
    70%  { opacity: .85; }
    100% { opacity: 0; }
}

@keyframes starsCometFly {
    /* The tail stretches on entry and shrinks as it burns out - a constant-length streak is what
       makes these read as a sliding line. */
    0%   { translate: 0 0;                  scale: .35 1; }
    100% { translate: var(--dist, 460px) 0; scale: 1 1; }
}

@supports (animation-timeline: scroll()) {
    @keyframes starsDriftFar  { to { transform: translate3d(0, -4vh,  0); } }
    @keyframes starsDriftMid  { to { transform: translate3d(0, -10vh, 0); } }
    @keyframes starsDriftNear { to { transform: translate3d(0, -18vh, 0); } }

    .stars__layer--far  { animation: starsDriftFar  linear both; }
    .stars__layer--mid  { animation: starsDriftMid  linear both; }
    .stars__layer--near { animation: starsDriftNear linear both; }

    /* MUST come after the `animation` shorthand. animation-timeline is a reset-only
       component of it, so declaring it first means the shorthand silently wipes it and the
       parallax just never runs. */
    .stars__layer { animation-timeline: scroll(root block); }
}

/* Reduced motion takes the amplitude to ZERO, not "less": slower large-scale motion is
   often worse for vestibular sensitivity, not better. The stars stay fully visible and
   static - we are removing motion, not content. */
@media (prefers-reduced-motion: reduce) {
    .stars__layer,
    .stars__spin,
    .stars__live,
    .stars__star,
    .stars__comet { animation: none; }

    .stars__comet { display: none; }
}

body.home {
    overflow: hidden;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

.neon-glow-outline {
    outline: 1px solid rgba(214, 235, 255, 0.96);
    outline-offset: -1px;
    box-shadow:
        0 0 0 1px rgba(214, 235, 255, 0.3),
        0 0 4px rgba(214, 235, 255, 0.5),
        0 0 8px rgba(214, 235, 255, 0.34),
        0 0 12px rgba(120, 207, 255, 0.24),
        0 0 16px rgba(124, 93, 255, 0.18);
}

@media (min-width: 768px) {
    .neon-glow-outline {
        box-shadow:
            0 0 0 1px rgba(214, 235, 255, 0.34),
            0 0 8px rgba(214, 235, 255, 0.72),
            0 0 18px rgba(120, 207, 255, 0.5),
            0 0 34px rgba(124, 93, 255, 0.36);
    }
}

a {
    color: #C6DEFF;
}

a:where(:link, :visited, :hover, :focus, :focus-visible, :active) {
    color: #C6DEFF;
}

a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible,
input[type="submit"]:focus,
input[type="submit"]:focus-visible,
input[type="button"]:focus,
input[type="button"]:focus-visible,
input[type="reset"]:focus,
input[type="reset"]:focus-visible {
    outline: none;
}

@media (hover: none), (pointer: coarse) {
    a,
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        -webkit-tap-highlight-color: transparent;
    }

    .line-merge:focus-visible {
        --line-merge: 0;
    }
}

p {
    margin: 0 0 10px;
}

p:last-child {
    margin-bottom: 0;
}

ul,
ol {
    margin: 0 0 10px;
    padding-left: 1.4em;
}

ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

li + li {
    margin-top: 8px;
}

.page-template-about-us {
    overflow: auto;
}

.home .swiper-button-next, .home .swiper-button-prev {
    position: relative;
    top: 10px;
}
.home .swiper-button-next svg, .home .swiper-button-prev svg {
    height: auto;
    width: auto;
}

.home .swiper-button-next svg {
    transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
    .home .swiper-button-next:hover svg, .home .swiper-button-prev:hover svg {
        fill-opacity: 1;
    }
}
.page-template-about-us main {
    padding: 0;
    position: relative;
}

.btn-buy {
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    background: #08288B1A;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, text-shadow 0.3s ease, filter 0.3s ease;
    position: relative;
    z-index: 99;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    width: 184px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    --glow: 227 219 255;
    text-shadow:
        0 0 6px rgb(var(--glow) / .68),
        0 0 12px rgb(var(--glow) / .46),
        0 0 18px rgb(var(--glow) / .28),
        0 0 24px rgb(var(--glow) / .18),
        0 0 28px rgb(var(--glow) / .1);
    box-shadow:
        rgba(255, 255, 255, 0.5) 0 0 3px inset,
        rgba(229, 246, 255, 0.3) 0 0 6px inset,
        rgb(255, 255, 255) 0 0 2px,
        rgba(255, 255, 255, 0.88) 0 0 4px,
        rgba(229, 246, 255, 0.72) 0 0 8px,
        rgba(229, 246, 255, 0.4) 0 0 12px,
        rgba(229, 246, 255, 0.24) 0 0 18px,
        rgba(229, 246, 255, 0.14) 0 0 24px,
        rgba(229, 246, 255, 0.08) 0 0 28px;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .btn-buy {
        text-shadow: 0 0 10px rgb(var(--glow) / .70), 0 0 28px rgb(var(--glow) / .48), 0 0 65px rgb(var(--glow) / .32), 0 0 120px rgb(var(--glow) / .20), 0 0 180px rgb(var(--glow) / .12);
        box-shadow: rgba(255, 255, 255, 0.5) 0 0 3px inset, rgba(229, 246, 255, 0.3) 0 0 6px inset, rgb(255, 255, 255) 0 0 2px, rgba(255, 255, 255, 0.9) 0 0 4px, rgba(229, 246, 255, 0.8) 0 0 8px, rgba(229, 246, 255, 0.5) 0 0 15px, rgba(229, 246, 255, 0.35) 0 0 25px, rgba(229, 246, 255, 0.2) 0 0 45px, rgba(229, 246, 255, 0.1) 0 0 80px;
    }
}
.btn-buy__label {
    position: relative;
    display: inline-block;
}
.btn-buy__icon {
    width: auto;
    height: 38px;
    flex: 0 0 31px;
}
.btn-buy__lottie {
    display: block;
    height: 33px;
}
.btn-buy__label::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: #fff;
    opacity: .6;
    filter: blur(2px);
    z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
    .btn-buy:hover {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.92);
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.98), 0 0 18px rgba(242, 242, 242, 0.88), 0 0 34px rgba(229, 246, 255, 0.74), 0 0 56px rgba(229, 246, 255, 0.46);
        box-shadow: rgba(255, 255, 255, 0.72) 0 0 4px inset, rgba(229, 246, 255, 0.52) 0 0 10px inset, rgb(255, 255, 255) 0 0 3px, rgba(255, 255, 255, 0.98) 0 0 8px, rgba(229, 246, 255, 0.9) 0 0 16px, rgba(229, 246, 255, 0.68) 0 0 28px, rgba(229, 246, 255, 0.42) 0 0 52px, rgba(229, 246, 255, 0.2) 0 0 90px;
        filter: brightness(1.08);
    }
}

.btn-buy:focus,
.btn-buy:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.btn-buy:active {
    outline: none !important;
    box-shadow: none !important;
}

@keyframes btnBuyHeaderNeonAura {
    /* Compositor-only pulse: opacity + transform (the blur stays STATIC on the pseudo-elements below,
       so nothing repaints per frame). This carries the "breathing neon" so the button itself no longer
       needs a per-frame box-shadow/filter animation. */
    0%,
    100% {
        opacity: 0.44;
        transform: scale(0.98);
    }

    50% {
        opacity: 0.72;
        transform: scale(1.045);
    }
}

.site-header .btn-buy {
    background: rgb(14 20 83 / 0.88);
    isolation: isolate;
}

@media (min-width: 768px) {
    .site-header .btn-buy {
        min-width: 184px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .site-header .btn-buy:hover {
        background: rgb(26 33 108 / 0.92);
    }
}

.site-header .btn-buy__icon,
.site-header .btn-buy__label {
    position: relative;
    z-index: 1;
}

/* The button itself no longer runs a per-frame box-shadow/text-shadow/filter animation (that painted
   every frame, forever — the "non-composited animations" flag). It keeps its STATIC neon (base .btn-buy
   glow); the breathing pulse now lives entirely in the aura pseudo-elements below, animated on the
   compositor (opacity + transform). Visually near-identical, but off the main thread. */
.site-header .btn-buy[data-gooey-reveal-complete="1"]::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 50%, rgba(198, 222, 255, 0.34) 0%, rgba(147, 145, 253, 0.2) 36%, rgba(147, 145, 253, 0) 78%);
    opacity: 0.44;
    filter: blur(12px);
    z-index: -1;
    pointer-events: none;
    will-change: opacity, transform;
    animation: btnBuyHeaderNeonAura 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.site-header .btn-buy[data-gooey-reveal-complete="1"] .btn-buy__label::after {
    animation: btnBuyHeaderNeonAura 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@media (max-width: 768px) {
    .menu-list a {
        color: #fff;
    }
}

.video-slider {
    width: 100%;
    height: 100%;
}

.video-slider .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-slider video {
    width: 100%;
    height: auto;
    display: block;
}

.video-slide {
    position: relative;
    width: 100%;
    height: 100vh;
}

.slide-effect,
.mobile-icon-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #FFFFFF66;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.76px solid #FFFFFF66;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
}

.slide-effect img,
.mobile-icon-btn img {
    width: 28px;
    height: 28px;
}

.slide-effect svg,
.mobile-icon-btn svg {
    width: 28px;
    height: 28px;
    color: inherit;
}

.video-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.highlight.is-active {
    border-bottom: 1px solid;
    width: max-content;
}
.highlight {
    text-shadow:
        0 0 2.21px #F2F2F2,
        0 0 10.42px #F2F2F2;
}
.highlight-blue {
    text-shadow:
        0 0 0.8px rgb(147, 145, 253),
        0 0 10.42px rgb(147, 145, 253);
}

.video-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.video-slide__button {
    display: inline-block;
    position: relative;
    border: none;
    color: #fff;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .video-slide__button:hover {
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(242, 242, 242, 0.78), 0 0 28px rgba(242, 242, 242, 0.58), 0 0 42px rgba(242, 242, 242, 0.42);
    }
}

.line-merge {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.37;
    letter-spacing: 0.02em;
    position: relative;
    --line-merge: 0;
    --line-height: 3px;
    --line-width: 80%;
    --line-bottom: -9px;
    --line-left-before: -30%;
    --line-left-after: 50%;
    --line-offset-before: -2px;
    --line-offset-after: 2px;
    --line-duration: 0.35s;
}

@media (min-width: 768px) {
    .line-merge {
        font-weight: 800;
        line-height: 1.4;
    }
}

.line-merge::before,
.line-merge::after {
    content: '';
    position: absolute;
    height: var(--line-height);
    width: var(--line-width);
    bottom: var(--line-bottom);
    background: #fff;
    box-shadow: 0 0 6px #F2F2F2, 0 0 11px #F2F2F2;
    transition: transform var(--line-duration) cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.line-merge::before {
    left: var(--line-left-before);
    transform: translateY(calc((1 - var(--line-merge)) * var(--line-offset-before)));
}

.line-merge::after {
    left: var(--line-left-after);
    transform: translateY(calc((1 - var(--line-merge)) * var(--line-offset-after)));
}

@media (hover: hover) and (pointer: fine) {
    .line-merge:hover,
    .line-merge:focus-visible {
        --line-merge: 1;
    }
}

@media (max-width: 768px) {
    .slider-controls {
        bottom: 26px;
        width: auto;
        min-width: 180px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: flex;
    }

    .swiper-button-prev img,
    .swiper-button-next img {
        width: 14px;
        height: 14px;
    }
}

.slider-controls {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
    width: 10%;
    min-width: 200px;
    height: 30px;
    justify-content: space-between;
    pointer-events: auto;
}

.sound-toggle {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 10001;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    pointer-events: auto;
}

body:not(.neonika-preloader-skip) .sound-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sound-toggle__lottie {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.sound-toggle__lottie svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

#sound-toggle:focus-visible {
    outline: none;
}

@media (max-width: 768px) {
    .sound-toggle {
        right: 15px;
    }
}

.swiper-pagination {
    position: relative;
    width: auto;
}

.swiper-button-prev,
.swiper-button-next {
    position: relative;
    color: #fff;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: unset;
}

.swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

.swiper-button-prev, .swiper-button-next {
    background: #FFFFFF40;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.swiper-pagination {
    position: relative;
}
.swiper-pagination-bullet {
    background: #FFFFFF66;
    width: 10px;
    height: 10px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    box-shadow: 0 0 5.21px 0 #F2F2F2;
    background: #fff;
}
.about-world__feature {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: center;
}

.about-world__feature-images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.about-world__feature-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.worlds-slider {
    overflow: visible;
}

.worlds-slider .swiper-wrapper {
    overflow: visible;
}

.worlds-slider .swiper-slide {
    width: 85%;
}

.about-world__pagination {
    position: relative;
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.about-world__arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    cursor: pointer;
    position: relative;
}

.about-world__arrow--prev::before,
.about-world__arrow--next::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.about-world__arrow--prev::before {
    background-image: url('assets/images/left.svg');
}

.about-world__arrow--next::before {
    background-image: url('assets/images/right.svg');
}

.worlds-slider .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.4) !important;
    opacity: 1;
}

.worlds-slider .swiper-pagination-bullet-active {
    background: #fff !important;
    box-shadow: 0 0 5.21px 0 #F2F2F2;
}

.about-world__instagram {
    text-align: center;
    position: relative;
    width: min(375px, 100% - 30px);
    margin: 0 auto;
}

@media (min-width: 768px) {
    .about-world__instagram {
        width: min(768px, 100% - 48px);
    }
}

@media (min-width: 1024px) {
    .about-world__instagram {
        width: min(1460px, 100% - 40px);
    }
}

.about-world__instagram-title {
    color: #fff;
    cursor: pointer;
}

.about-world__instagram-subtitle {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2px;
    margin-top: 20px;
    cursor: pointer;
}

.about-world__instagram-subtitle a {
    color: #fff;
}
@media (hover: hover) and (pointer: fine) {
    .about-world__instagram-subtitle:hover,
    .about-footer__nav a:hover,
    .about-footer__legal-link:hover,
    .about-footer__credit-link:hover {
        filter:
                drop-shadow(0px 0px 5.21px #F2F2F2)
                drop-shadow(0px 0px 10.42px #F2F2F2);
    }
}

#sb_instagram.sbi #sbi_images.about-world__instagram-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 944px;
    margin: 30px auto 0;
    padding: 0;
    float: none;
    line-height: normal;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #sb_instagram.sbi #sbi_images.about-world__instagram-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 37px;
    }
}

.about-world__instagram-item {
    display: block;
    width: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.about-world__instagram-media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.about-world__instagram-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.about-links-section {
    padding: 0;
}

.about-links__inner {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.about-links__item {
    position: relative;
    min-height: 290px;
    background-size: cover;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #FFFFFF1A;
    border: 2px solid #fff;
    transition: 0.2s;
    box-shadow: 0 0 5px #F2F2F2, 0 0 10px rgba(242, 242, 242, 0.5);
}
.about-links__icon {
    width: 50px;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(.25,.46,.45,.94), filter 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .about-links__item:hover span {
        filter: drop-shadow(0 0 6px #F2F2F2);
    }

    .about-links__item:hover .about-links__icon {
        transform: translateY(-6px) scale(1.15);
        filter: drop-shadow(0 0 6px #F2F2F2) drop-shadow(0 0 12px rgba(242, 242, 242, 0.5));
    }
}

.about-links__title {
    position: relative;
    z-index: 1;
    color: #fff;
    text-align: center;
    transition: 0.2s;
}

@media (max-width: 992px) {
    .worlds-slider .swiper-slide {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .about-world__feature {
        grid-template-columns: 1fr;
        gap: 35px;
    }

}


@media (max-width: 992px) {
    .about-links-section {
        padding: 0;
    }

    .about-links__inner {
        grid-template-columns: 1fr;
        padding-left: 15px;
        padding-right: 15px;
    }
}

.about-footer__wrap {
    position: relative;
    overflow: hidden;
}

footer {
    padding-top: 100px;
}

@media (min-width: 768px) {
    footer {
        padding-top: 140px;
    }
}

.about-footer {
    position: relative;
    z-index: 1;
    padding-right: 40px;
    padding-bottom: 30px;
    padding-left: 40px;
    will-change: transform;
}

.about-footer__dark {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7, 9, 28, 0.08) 0%, rgba(7, 9, 28, 0.48) 100%);
}

.about-footer__inner {
    margin: 0 auto;
}

.about-footer__nav {
    display: flex;
    justify-content: center;
    gap: 59px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .about-footer__nav {
        gap: 10px 30px;
    }
}

.about-footer__nav li {
    margin: 0;
    padding: 0;
}

.about-footer__nav a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    display: inline-block;
}
.about-footer__logo {
    padding: 60px 0 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.about-footer__logo a {
    display: block;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}

.about-footer__logo .site-logo-lottie {
    display: block;
}

.about-footer__logo .site-logo-lottie__animation {
    width: 100%;
    display: block;
    filter: drop-shadow(0px 0px 5.21px #F2F2F2) drop-shadow(0px 0px 10.42px #F2F2F2);
}

.about-footer__logo .site-logo-lottie__animation svg {
    display: block;
    width: 100%;
    height: auto;
}

.about-footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: 40px;
    gap: 12px;
}

.about-footer__social {
    display: flex;
    gap: 12px;
}

.about-footer__legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.about-footer__legal a {
    color: #fff;
    text-decoration: none;
}

.about-footer__credit {
    display: flex;
    justify-content: flex-end;
}

.about-footer__credit-link {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 992px) {
    .about-footer {
        padding-right: 20px;
        padding-bottom: 24px;
        padding-left: 20px;
    }

    .about-footer__bottom {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .about-footer__credit {
        justify-content: center;
    }
}

.swiper-pagination {
    position: static;
}

.page-shell--text {
    padding-top: 210px;
}

@media (min-width: 768px) {
    .page-shell--text {
        padding-top: 117px;
    }
}

.page-shell__title {
    margin-bottom: 35px;
}

@media (min-width: 768px) {
    .page-shell__title {
        margin-bottom: 60px;
    }
}

.default-page {
    min-height: 100vh;
}

.default-page__inner {
    max-width: 860px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    box-sizing: border-box;
}

.default-page__title {
    margin: 0 0 40px;
    color: #fff;
    text-shadow: 0 0 18px rgba(229, 246, 255, 0.35);
}

.default-page__content {
    color: rgba(255, 255, 255, 0.86);
}

.default-page__content > *:first-child {
    margin-top: 0;
}

.default-page__content > *:last-child {
    margin-bottom: 0;
}

.default-page__content h2,
.default-page__content h3,
.default-page__content h4,
.default-page__content h5,
.default-page__content h6 {
    margin: 40px 0 16px;
    color: #fff;
}

.default-page__content p,
.default-page__content ul,
.default-page__content ol,
.default-page__content blockquote {
    margin: 0 0 18px;
}

.default-page__content ul,
.default-page__content ol {
    padding-left: 1.4em;
}

.default-page__content li + li {
    margin-top: 8px;
}

.default-page__content a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.default-page__content strong {
    color: #fff;
}

.default-page__content img {
    display: block;
    max-width: 100%;
    height: auto;
}

.contact-page {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* The darkening overlay lives on .contact-bg, not on .contact-page, so it composites with the video
   BEFORE the bottom fade is applied. Masking the two separately makes the video re-emerge halfway
   down the ramp - the overlay that hides it is fading out at the same rate - and that rebound is
   what reads as a band with an edge. See the same fix on .about-immersive-hero__backdrop. */
.contact-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(359.67deg, rgba(7, 10, 28, 0.96) 5.77%, rgba(4, 10, 36, 0.72) 58%, rgba(2, 15, 58, 0.24) 102.78%);
}

.contact-hero {
    position: relative;
    min-height: 100vh;
    padding: 100px 40px;
}

.contact-hero__left {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-hero__inner {
    position: relative;
    z-index: 1;
}

.contact-hero__inner {
    padding: 40px 0 80px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: start;
}

.contact-hero__right {
    display: flex;
    justify-content: center;
}

.contact-hero__title {
    color: #fff;
    font-weight: 900;
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

@media (min-width: 768px) {
    .contact-hero__title {
        font-size: 90px;
        font-weight: 700;
        letter-spacing: 0.03em;
    }
}

.contact-hero__title-emphasis {
    display: block;
}

@media (max-width: 768px) {
    .contact-hero__title-emphasis {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 175px;
    }
}

.contact-hero__title-line {
    display: inline;
}

.contact-hero__title-rotating-wrap {
    display: inline;
}

.contact-hero__title-rotating {
    font-style: italic;
}

.contact-hero__info {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 43px;
    z-index: 3;
}

@media (min-width: 768px) {
    .contact-hero__info {
        position: absolute;
        bottom: 190px;
        margin-top: 0;
    }
}

.contact-hero__info-row {
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (min-width: 768px) {
    .contact-hero__info-row {
        flex-direction: row;
        align-items: flex-start;
    }
}

.contact-hero__info-label {
    flex: 0 0 auto;
}

.contact-hero__info-value {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    min-width: 0;
}

@media (min-width: 768px) {
    .contact-hero__info-value {
        flex-wrap: nowrap;
    }
}

.contact-form {
    position: relative;
    width: 100%;
    max-width: 560px;
    padding: 18px;
}

.contact-form__submit {
    filter: drop-shadow(0px 0px 5.21px #F2F2F2) drop-shadow(0px 0px 10.42px #F2F2F2);
}

.contact-form__notice {
    color: rgba(255, 255, 255, 0.9);
}

.contact-form__submit-error {
    margin-top: 6px;
    margin-bottom: 0;
    color: #ff7b86;
}

.contact-form__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.contact-form__select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.contact-form__select select {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(10, 18, 38, 0.22);
    color: #fff;
    padding: 0 16px;
    outline: none;
    -webkit-appearance: none;
    pointer-events: none;
}

.contact-form__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.contact-form__cat {
    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(10, 18, 38, 0.22);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    user-select: none;
}

@media (hover: hover) and (pointer: fine) {
    .contact-form__cat:hover {
        border-color: rgba(120, 220, 255, 0.45);
        box-shadow: 0 0 12px rgba(84, 200, 255, 0.12);
    }
}
.contact-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.contact-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-bg--image {
    background-size: cover;
    background-position: center;
}

/* The contact background and its darkening overlay both stop dead at the bottom of the page shell,
   which cut a hard line straight across the sky. Fade both out over the same ramp so the video
   dissolves and the starfield comes through. */
.contact-bg {
    -webkit-mask-image: var(--sky-fade);
    mask-image: var(--sky-fade);
}


.contact-form__cat.is-active {
    border-color: rgba(120, 220, 255, 0.75);
    background: linear-gradient(180deg, rgba(120, 220, 255, 0.55), rgba(120, 220, 255, 0.18));
    box-shadow:
            0 0 6px rgba(242, 242, 242, 0.22),
            0 0 18px rgba(84, 200, 255, 0.22);
}

.contact-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .contact-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.contact-form__field {
    display: grid;
    gap: 4px;
}

@media (min-width: 768px) {
    .contact-form__field--full {
        grid-column: 1 / -1;
    }
}

.contact-form__field.is-hidden {
    display: none;
}

.contact-form__control {
    position: relative;
}

.contact-form__field input,
.contact-form__field textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(10, 18, 38, 0.22);
    color: #fff;
    padding: 14px 16px;
    outline: none;
    font: inherit;
    font-size: 16px;
    letter-spacing: inherit;
}

.contact-form__field input {
    height: 48px;
    padding-right: 52px;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
    border-color: rgba(120, 220, 255, 0.75);
    box-shadow: 0 0 0 1px rgba(120, 220, 255, 0.18), 0 0 22px rgba(84, 200, 255, 0.14);
}

.contact-form__field textarea {
    resize: none;
    min-height: 120px;
}

.contact-form__clear,
.contact-form__alert {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.contact-form__clear {
    right: 16px;
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(236, 236, 236, .2);
    border-radius: 50%;
    border: none;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
}

.contact-form__field.has-value .contact-form__clear {
    display: inline-flex;
}

.contact-form__clear::before,
.contact-form__clear::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 1px;
    background: currentColor;
}

.contact-form__clear::before {
    transform: rotate(45deg);
}

.contact-form__clear::after {
    transform: rotate(-45deg);
}

.contact-form__alert {
    right: 16px;
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid #ff5b5b;
    border-radius: 50%;
    color: #ff5b5b;
}

.contact-form__field.is-invalid input,
.contact-form__field.is-invalid textarea {
    border-color: #ff5b5b;
}

.contact-form__field.is-invalid .contact-form__alert {
    display: inline-flex;
}

.contact-form__field.is-invalid.has-value .contact-form__clear {
    right: 44px;
}

.contact-form__error {
    margin: 3px 0 0 0;
    color: #fff;
}

.contact-form__submit {
    margin-top: 12px;
    width: 100%;
    height: 52px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    color: #fff;
    box-shadow: 0 0 2px #f2f2f2;
    background: #08288B1A;
    cursor: pointer;
}

.contact-form__submit:disabled {
    opacity: 0.7;
    cursor: wait;
}

@media (hover: hover) and (pointer: fine) {
    .contact-form__submit:hover {
        box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.45),
                0 0 22px rgba(84, 200, 255, 0.22),
                0 0 60px rgba(84, 200, 255, 0.14);
    }
}

.contact-form__policy {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}


.contact-form__policy-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

@media (max-width: 768px) {
    .page-template-contact main {
        padding-top: 200px;
    }
    .contact-hero__inner {
        padding: 0;
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .contact-form {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    .contact-hero {
        position: relative;
        min-height: 100vh;
        padding: 0 15px 50px;
    }

    .page-template-legal-mentions .faq__content {
        max-width: 100%;
    }

}

.legal-back {
    display: none;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

@media (min-width: 769px) {
    .legal-back {
    position: fixed;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    }
}

@media (hover: hover) and (pointer: fine) {
    .legal-back:hover {
        color: #fff;
        text-shadow: 0 0 10px rgba(229, 246, 255, 0.35);
    }
}

.page-template-legal-mentions .faq__inner {
    max-width: 1200px;
    grid-template-columns: 1fr;
    margin-top: 0;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    box-sizing: border-box;
}

.page-template-legal-mentions .faq__content {
    max-width: 860px;
    margin: 0 auto;
}

.faq {
    min-height: 100vh;
    padding-right: 40px;
    padding-left: 40px;
}

/* First-screenful FAQ entrance. Pure CSS + compositor: content paints immediately and gently fades +
   rises on load, so it never waits on the JS bundle and never holds text invisible. Only the nav, the
   H1, the first group's title and its first two rows use it - everything below the fold uses the real
   scroll-triggered `gooey-reveal` (see the comment in faq.php for why the boundary exists). */
@keyframes faqReveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.faq-reveal {
    animation: faqReveal 0.55s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .faq-reveal {
        animation: none;
    }
}

.faq__inner {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 20% 1fr;
    gap: 70px;
}

.faq__nav {
    position: sticky;
    top: 140px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.faq__content {
    max-width: 70%;
}
.faq__nav-item {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: 0.25s ease;
}

.faq__nav-item.is-active {
    color: #fff;
    text-shadow: 0 0 10px rgba(229, 246, 255, 0.45);
}

@media (hover: hover) and (pointer: fine) {
    .faq__nav-item:hover {
        color: #fff;
        text-shadow: 0 0 10px rgba(229, 246, 255, 0.45);
    }
}

.faq__page-title {
    color: #fff;
}

.faq__group {
    margin-bottom: 60px;
    scroll-margin-top: 100px;
}

.faq__group-title {
    color: #fff;
    margin-bottom: 5px;
}

.mention_title {
    color: #fff;
}

.page-template-legal-mentions .mention_title {
    margin: 0 0 10px;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.faq__list ol {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.page-template-legal-mentions .faq__list ol {
    padding-left: 22px;
}

@media (max-width: 992px) {
    .faq {
        padding-right: 15px;
        padding-left: 15px;
    }

    .faq__inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .faq__nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }
    .faq__content {
        max-width: 100%;
    }
}

/* ============================================
   WEBGL SLIDER STYLES
   ============================================ */

/* Canvas Container */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: auto;
    cursor: grab;
    /* Dark floor under the poster/canvas so a handoff frame can never expose the page
       background (the source of the white pop on desktop). Matches the entrance + clear color. */
    background-color: #0a0a0a;
}

#canvas-container:active {
    cursor: grabbing;
}

#canvas-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

/* Server-rendered hero poster (LCP element). Painted by the browser immediately,
   sits under the WebGL canvas, and is faded out by ImageSlider once the first
   video reveals — avoids the ~40s LCP from a JS-set background image. */
.hero-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

#vignette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 15%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.25) 85%, rgba(0, 0, 0, 0.45) 100%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.2) 100%);
}
/* ============================================
   WEATHER CONTROL - Sun/Rain specific styles
   ============================================ */

/* Sun active - warm glow */
#weather-sun.active>div {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
    color: rgba(255, 220, 150, 1);
}

@media (hover: hover) and (pointer: fine) {
    #weather-sun.active>div:hover {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: none;
    }
}

#weather-sun.active>div img,
#weather-sun.active>div svg {
    filter: drop-shadow(0 0 5px rgba(255, 220, 120, 0.8));
}

/* Light active - warm lamp glow */
#light-toggle.active>div {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 220, 100, 1);
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    #light-toggle.active>div:hover {
        box-shadow: none;
    }
}

#light-toggle.active>div img,
#light-toggle.active>div svg {
    filter: drop-shadow(0 0 5px rgba(255, 220, 120, 0.8));
}


@media (max-width: 768px) {
    #vignette-overlay {
        background: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.15) 0%,
                rgba(0, 0, 0, 0.15) 20%,
                transparent 45%,
                transparent 55%,
                rgba(0, 0, 0, 0.15) 80%,
                rgba(0, 0, 0, 0.15) 100%
        );
    }
}

#color-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    --light-overlay-opacity: 0;
    background: linear-gradient(
            180deg,
            rgba(10, 10, 10, 0) 0%,
            rgba(10, 10, 10, 0.1) 50%,
            rgba(10, 10, 10, 0.3) 100%
    );
    pointer-events: none;
}

#color-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--light-overlay-opacity);
    transition: opacity 0.25s ease;
    background:
        radial-gradient(ellipse at 78% 22%, rgba(255, 228, 132, 0.62) 0%, rgba(255, 210, 92, 0.22) 40%, rgba(255, 210, 92, 0) 74%),
        linear-gradient(180deg, rgba(255, 218, 120, 0.16) 0%, rgba(255, 196, 78, 0.34) 100%);
    mix-blend-mode: normal;
}

/* Pagination Arrow */
.wd-pagination-arrow {
    cursor: pointer;
    padding: 10px;
    transition: all 0.3s ease;
    animation: bounceDown 2s infinite;
}

@media (hover: hover) and (pointer: fine) {
    .wd-pagination-arrow:hover {
        transform: scale(1.1);
    }
}

@keyframes bounceDown {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(8px);
    }
    60% {
        transform: translateY(4px);
    }
}

/* ============================================
   VIDEO SLIDER CONTENT - OLD UI DESIGN
   ============================================ */

/* Main Content Wrapper */
.video-slider-content {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.slide-content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    bottom: 120px;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.slide-content.active {
    opacity: 1;
    pointer-events: auto;
}

.slide-main-title {
    filter:
      drop-shadow(0px 0px 2.21px #F2F2F2)
      drop-shadow(0px 0px 10.42px #F2F2F2);
    color: #fff;
    text-transform: none;
    margin-bottom: 12px;
}

.slide-main-title a {
    font: inherit;
    color: inherit;
    text-transform: inherit;
    text-decoration: none;
}

.slider-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .pagination-dot:hover {
        background: rgba(255, 255, 255, 0.6);
    }
}

.pagination-dot.active {
    background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 640px) {
}

/* ============================================
   MOBILE SLIDER LAYOUT
   ============================================ */

/* Mobile Right Side Icons */
.mobile-right-icons {
    display: none;
}

/* Mobile styles */
@media (max-width: 640px) {
    .desktop-only {
        display: none !important;
    }
    .mobile-right-icons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
    }

    .mobile-icon-btn {
        width: 60px;
        height: 60px;
        pointer-events: auto;
        padding: 0;
    }

    .mobile-icon-btn img {
        width: 60%;
        height: auto;
    }

    .mobile-icon-btn svg {
        width: 60%;
        height: auto;
        color: inherit;
    }

    .mobile-icon-btn.active {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .mobile-icon-btn.active[data-effect="sun"] {
        color: rgba(255, 220, 150, 1);
    }

    .mobile-icon-btn.active[data-effect="light"] {
        color: rgba(255, 220, 100, 1);
    }

    .mobile-icon-btn.active[data-effect="sun"] img,
    .mobile-icon-btn.active[data-effect="sun"] svg,
    .mobile-icon-btn.active[data-effect="light"] img,
    .mobile-icon-btn.active[data-effect="light"] svg {
        filter: drop-shadow(0 0 5px rgba(255, 220, 120, 0.8));
    }

    .video-slide__button {
        position: relative;
        padding-bottom: 6px;
    }
    .home .slide-content {
        width: 70%;
        bottom: clamp(140px, 18vh, 220px);
    }
    .slider-controls {
        bottom: clamp(32px, 7vh, 72px);
        padding: 0 20px;
        width: calc(100% - 40px);
        max-width: 300px;
        justify-content: center;
        gap: 20px;
    }

    /* Smaller navigation arrows */
    .swiper-button-prev,
    .swiper-button-next {
        width: 32px;
        height: 32px;
    }

    .swiper-button-prev img,
    .swiper-button-next img {
        width: 14px;
        height: 14px;
    }

    /* Smaller dots */
    .pagination-dot {
        width: 6px;
        height: 6px;
    }

}

/* ============================================
   ABOUT US PAGE MOBILE STYLES
   ============================================ */

@media (max-width: 640px) {
    .page-template-about-us .worlds-slider {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        overflow: hidden;
    }

    .page-template-about-us .worlds-slider .swiper-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .page-template-about-us .about-world__feature-images {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0;
    }

    .page-template-about-us .about-world__feature-images::-webkit-scrollbar {
        display: none;
    }

    .page-template-about-us .about-world__feature-image {
        flex: 0 0 100%;
        width: 100%;
        height: 397px;
        object-fit: cover;
        border-radius: 12px;
        scroll-snap-align: center;
    }

    .page-template-about-us .image-slider-dots {
        display: flex;
        gap: 4px;
        position: absolute;
        bottom: 10px;
        width: 100%;
        justify-content: center;
    }

    .page-template-about-us .image-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        opacity: 1;
        cursor: pointer;
    }

    .page-template-about-us .image-dot.active {
        background: #fff;
        box-shadow: 0 0 5px 0 #F2F2F2;
    }

    .page-template-about-us .about-world__inner .btn-buy {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 11px;
        width: 100%;
        text-align: center;
        color: #fff;
        text-transform: uppercase;
        text-decoration: none;
        transition: all 0.3s ease;
        padding-left: 0;
        padding-right: 0;
        top: 20px;
    }
    .page-template-about-us .about-world__inner .btn-buy::before {
        position: static;
    }

    .page-template-about-us .about-links-section {
        padding: 0;
    }

    .page-template-about-us .swiper-pagination {
        position: relative;
        margin-top: 0;
        display: flex;
        justify-content: center;
    }

    .page-template-about-us .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: rgba(255, 255, 255, 0.4);
        opacity: 1;
    }

    .page-template-about-us .swiper-pagination-bullet-active {
        background: rgba(255, 255, 255, 0.9);
    }
}

/* ============================================
   ICON EFFECTS - From Prototype
   Light, Weather (Sun/Rain), Reaction (Heart)
   ============================================ */

/* Light Toggle Effect */
.slide-effect[data-effect="light"],
#slide-effect-right[data-effect="light"] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.slide-effect[data-effect="light"] img,
#slide-effect-right[data-effect="light"] img,
.slide-effect[data-effect="light"] svg,
#slide-effect-right[data-effect="light"] svg {
    filter: none;
}

/* Sun Effect - Warm glow */
.slide-effect[data-effect="sun"],
#slide-effect-right[data-effect="sun"] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.slide-effect[data-effect="sun"] img,
#slide-effect-right[data-effect="sun"] img,
.slide-effect[data-effect="sun"] svg,
#slide-effect-right[data-effect="sun"] svg {
    filter: none;
}

/* Rain Effect - Cool blue glow */
.slide-effect[data-effect="rain"],
#slide-effect-right[data-effect="rain"] {
    background: rgba(100, 150, 220, 0.2);
    border-color: rgba(80, 140, 220, 0.5);
    box-shadow:
            0 0 15px rgba(100, 160, 230, 0.35),
            0 0 30px rgba(80, 140, 210, 0.2);
    animation: rainShimmer 2s ease-in-out infinite;
}

.slide-effect[data-effect="rain"] img,
#slide-effect-right[data-effect="rain"] img,
.slide-effect[data-effect="rain"] svg,
#slide-effect-right[data-effect="rain"] svg {
    filter: drop-shadow(0 0 5px rgba(120, 180, 255, 0.9));
    animation: rainDrop 1.5s ease-in-out infinite;
}

@keyframes rainShimmer {
    0%, 100% {
        box-shadow: 0 0 15px rgba(100, 160, 230, 0.35), 0 0 30px rgba(80, 140, 210, 0.2);
    }
    50% {
        box-shadow: 0 0 25px rgba(120, 180, 255, 0.5), 0 0 50px rgba(100, 160, 230, 0.3);
    }
}

@keyframes rainDrop {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

/* Heart Effect - Pink/Red glow */
.slide-effect[data-effect="heart"],
#slide-effect-right[data-effect="heart"],
.mobile-icon-btn[data-effect="heart"] {
    background: rgba(255, 150, 180, 0.2);
    border-color: rgba(255, 120, 160, 0.5);
    box-shadow:
            0 0 15px rgba(255, 130, 170, 0.35),
            0 0 30px rgba(255, 100, 150, 0.2);
    animation: heartBeat 1.2s ease-in-out infinite;
}

.slide-effect[data-effect="heart"] img,
#slide-effect-right[data-effect="heart"] img,
.slide-effect[data-effect="heart"] svg,
#slide-effect-right[data-effect="heart"] svg,
.mobile-icon-btn[data-effect="heart"] img,
.mobile-icon-btn[data-effect="heart"] svg {
    filter: drop-shadow(0 0 5px rgba(255, 150, 180, 0.9));
    animation: heartPulse 1.2s ease-in-out infinite;
}

@keyframes heartBeat {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 130, 170, 0.35), 0 0 30px rgba(255, 100, 150, 0.2);
        transform: scale(1);
    }
    25% {
        box-shadow: 0 0 20px rgba(255, 150, 190, 0.45), 0 0 40px rgba(255, 120, 170, 0.3);
        transform: scale(1.05);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 130, 170, 0.35), 0 0 30px rgba(255, 100, 150, 0.2);
        transform: scale(1);
    }
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.15); }
    50% { transform: scale(1); }
}

/* Mobile icon effects */
.mobile-icon-btn[data-effect="rain"] {
    animation: rainShimmer 2s ease-in-out infinite;
}

.mobile-icon-btn[data-effect="heart"] {
    animation: heartBeat 1.2s ease-in-out infinite;
}

.flying-icon {
    position: fixed;
    pointer-events: none;
    z-index: 100;
    will-change: transform, opacity;
}

.flying-icon svg {
    width: 24px;
    height: 24px;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1.5;
    fill: none;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
}

.js-copy {
    display: flex;
    align-items: center;
    column-gap: 13px;
    flex-wrap: wrap;
    row-gap: 10px;
}
.js-copy-trigger {
    background: transparent;
    border: 0;
    color: inherit;
    position: relative;
    display: inline-flex;
    align-items: center;
}
.js-copy-trigger svg {
    height: 15px;
    width: auto;
}
.js-copy-status {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

/* ============================================
   Reveal-Up Page Animation
   ============================================ */

.reveal-up {
    transform: translateY(60px) rotate(2deg);
    opacity: 0;
    transition: transform 0.75s cubic-bezier(.7, 0, .3, 1), opacity 0.6s ease;
}

.reveal-up.is-visible {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
}

.about-us__content {
    position: relative;
    isolation: isolate;
    overflow: visible;
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    row-gap: 120px;
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .about-us__content {
        row-gap: 80px;
    }
}

@media (min-width: 1024px) {
    .about-us__content {
        row-gap: 140px;
    }
}

.about-us__section {
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.page-template-about-us .swiper {
    max-width: 100%;
    min-width: 0;
}

.page-template-about-us .swiper-wrapper {
    min-width: 0;
}

.location-map {
    width: 100%;
    overflow: hidden;
}

.location-map__link {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    overflow: hidden;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
}

.location-map__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
}

.how-to-access {
    display: grid;
    row-gap: 100px;
}

@media (min-width: 768px) {
    .how-to-access {
        row-gap: 140px;
    }
}

.how-to-access__inner {
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

@media (min-width: 768px) {
    .how-to-access__inner {
        max-width: 1042px;
    }
}

.how-to-access__title  {
    text-align: left;
}

@media (min-width: 768px) {
    .how-to-access__title  {
        text-align: center;
    }
}

.how-to-access__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "opening"
        "address"
        "parking";
    gap: 28px;
}

.how-to-access__content--has-map {
    grid-template-areas:
        "opening"
        "address"
        "map"
        "parking";
}

@media (min-width: 768px) {
    .how-to-access__content--has-map {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "opening map"
            "address map"
            "parking map";
    }
}

.how-to-access__group--opening {
    grid-area: opening;
}

.how-to-access__group-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: #C1CCF9;
}

.how-to-access__group-icon {
    display: block;
    width: 28px;
    height: auto;
    flex: 0 0 auto;
}

.how-to-access__group--address {
    grid-area: address;
}

.how-to-access__group--parking {
    grid-area: parking;
}

.how-to-access__map {
    grid-area: map;
    min-height: 220px;
    display: flex;
}

@media (min-width: 768px) {
    .how-to-access__map {
        align-self: stretch;
    }
}