/* ───────── Inner pages (about, cycles, news, article, gallery, contact): the same family of motion as the home page ─────────
   banner entrance and drifting circles, content that rises as you scroll, the CTA band, the article progress line,
   the gallery shimmer. Everything is switched on by pages-motion.js (so without JS the pages are plain),
   and switched off with "reduce motion". To undo it all: remove the link in base.html and the script in each page. */

.gs-banner, .in-cta, .in-info, .in-about-media, .gs-gallery-page { --ease: cubic-bezier(.2, .7, .2, 1); }

/* ── banner: circles drift (the ellipses became an element), the title writes itself ── */
.gs-banner { background: radial-gradient(80% 140% at 100% 0, var(--royal), transparent 60%), var(--ink); }
.gs-banner-rings { position: absolute; inset: -90px 0; z-index: -1; background: url("../images/ellipses.svg") 85% 40% / 1100px auto no-repeat; pointer-events: none; }
.gs-banner:has(> img) .gs-banner-rings, .gs-banner:has(> img) .gs-art { display: none; }

/* the yellow orbit with its dot, and a thin ring: shared by the banner, the CTA band and the contact panel */
.gs-art { position: absolute; z-index: -1; pointer-events: none; }
.gs-art i { position: absolute; display: block; }
.gs-art-ring { inset: 0; border: 3px solid var(--yellow); border-radius: 50%; rotate: -18deg; opacity: .9; }
.gs-art-halo { inset: -9%; border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 50%; rotate: -18deg; }
.gs-art-dot { left: calc(14.6% - 12px); top: calc(14.6% - 12px); width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .5); }
.gs-banner .gs-art { right: -4%; top: 50%; translate: 0 -50%; width: min(34vw, 430px); aspect-ratio: 1; }
@media (max-width: 767.98px) { .gs-banner .gs-art { right: -150px; top: -60px; translate: none; width: 280px; } }

.gs-banner .hm-word { display: inline-block; transition: opacity .8s ease calc(var(--w, 0) * .07s + .1s), translate .8s var(--ease) calc(var(--w, 0) * .07s + .1s); }
.gs-banner .gs-crumbs { transition: opacity .7s ease, translate .7s var(--ease); }
.gs-banner p { transition: opacity .8s ease .55s, translate .8s var(--ease) .55s; }
.gs-banner.is-armed:not(.is-in) .hm-word { opacity: 0; translate: 0 .6em; }
.gs-banner.is-armed:not(.is-in) .gs-crumbs { opacity: 0; translate: 0 -10px; }
.gs-banner.is-armed:not(.is-in) p { opacity: 0; translate: 0 22px; }
.gs-banner.is-armed:not(.is-in) h1:not(:has(.hm-word)) { opacity: 0; translate: 0 .5em; }
.gs-banner h1 { transition: opacity .8s ease .1s, translate .8s var(--ease) .1s; }

/* ── content that rises as you scroll to it ── */
@keyframes rv-up { from { opacity: 0; translate: 0 36px; } }
@keyframes rv-left { from { opacity: 0; translate: -44px 0; } }
@keyframes rv-right { from { opacity: 0; translate: 44px 0; } }
@keyframes rv-zoom { from { opacity: 0; scale: .94; } }
@keyframes rv-pop { from { opacity: 0; scale: .65; translate: 0 14px; } }
@keyframes rv-clip-l { from { opacity: .001; clip-path: inset(0 100% 0 0 round var(--radius-l)); } }
@keyframes rv-clip-r { from { opacity: .001; clip-path: inset(0 0 0 100% round var(--radius-l)); } }
@keyframes rv-clip-up { from { opacity: .001; clip-path: inset(100% 0 0 0 round var(--radius-l)); } }
main.rv-armed [data-rv]:not(.is-in):not([data-rv="line"]) { opacity: 0; }
main.rv-armed [data-rv].is-in { animation: rv-up .9s var(--ease) calc(var(--rv, 0) * .1s) backwards; }
main.rv-armed [data-rv="left"].is-in { animation-name: rv-left; }
main.rv-armed [data-rv="right"].is-in { animation-name: rv-right; }
main.rv-armed [data-rv="zoom"].is-in { animation-name: rv-zoom; }
main.rv-armed [data-rv="pop"].is-in { animation: rv-pop .7s var(--ease) calc(var(--rv, 0) * .1s) backwards; }
main.rv-armed [data-rv="clip-l"].is-in { animation: rv-clip-l 1.1s var(--ease) calc(var(--rv, 0) * .1s) backwards; }
main.rv-armed [data-rv="clip-r"].is-in { animation: rv-clip-r 1.1s var(--ease) calc(var(--rv, 0) * .1s) backwards; }
main.rv-armed [data-rv="clip-up"].is-in { animation: rv-clip-up 1.2s var(--ease) calc(var(--rv, 0) * .1s) backwards; }
main.rv-armed [data-rv="line"].is-in { animation: none; }

/* ── about ── */
.in-about-media { position: relative; }
.gs-card, .in-features > div { --lift: 0; }
.gs-card .gs-ico, .in-features .gs-ico { transition: background-color .25s, color .25s, scale .3s var(--ease); }
@media (hover: hover) {
    .gs-card:hover .gs-ico, .in-features > div:hover .gs-ico { background: var(--yellow); color: var(--ink); scale: 1.08; }
}

/* ── cycles ── */
.in-level-img img { transition: transform .9s var(--ease); }
@media (hover: hover) { .in-level:hover .in-level-img img { transform: scale(1.05); } }
.in-level-img.no-photo { position: relative; overflow: hidden; }
.in-steps { position: relative; }
.in-steps li { position: relative; z-index: 1; transition: transform .35s var(--ease), box-shadow .35s ease, border-color .25s; }
@media (hover: hover) { .in-steps li:hover { transform: translateY(-6px); border-color: var(--navy-2); box-shadow: var(--shadow-soft); } }
@media (min-width: 992px) {
    .in-steps::before { content: ""; position: absolute; z-index: 0; top: calc(1.8rem + 23px); left: calc(1.8rem + 23px); right: calc((100% - 3rem) / 3 - 1.8rem - 23px); border-top: 3px dashed var(--navy-2); opacity: .45; transform-origin: 0 50%; transition: transform 1.5s var(--ease) .35s; }
    main.rv-armed .in-steps[data-rv="line"]:not(.is-in)::before { transform: scaleX(0); }
}

/* ── article: reading progress, the picture unveils and settles ── */
.gs-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 4px; pointer-events: none; }
.gs-progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--navy-2), var(--yellow)); }
.in-article-frame { margin: 0 0 2.2rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-l); }
.in-article-frame .in-article-img { display: block; margin: 0; border: 0; border-radius: 0; }
@keyframes gs-unzoom { from { scale: 1.08; } }
main.rv-armed .in-article-frame.is-in .in-article-img { animation: gs-unzoom 1.8s var(--ease) both; }

/* ── gallery page ── */
/* a lone photo gets room instead of sitting in one narrow column */
.in-gallery:has(figure:only-child) { columns: 1; max-width: 560px; margin-inline: auto; }
.in-gallery:has(figure:nth-child(2):last-child) { columns: 2 280px; max-width: 900px; margin-inline: auto; }
.in-gallery figure { transition: transform .5s var(--ease), box-shadow .5s ease; }
.in-gallery a { display: block; }
.in-gallery figcaption { pointer-events: none; transition: translate .4s var(--ease); }
@media (hover: hover) {
    .in-gallery figure:hover { transform: translateY(-6px); box-shadow: 0 30px 46px -24px rgba(11, 28, 51, .6); }
    .in-gallery figure:hover figcaption { translate: 0 -4px; }
}
.in-gallery figure.is-loading img { opacity: 0; }
.in-gallery figure img { transition: transform .7s var(--ease), opacity .6s ease; }
.in-gallery figure.is-loading::before { content: ""; position: absolute; inset: 0; z-index: 1; min-height: 180px; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 80%) 0 0 / 220% 100%; animation: hm-shimmer 1.3s linear infinite; }
@keyframes hm-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ── CTA band ── */
.in-cta { position: relative; isolation: isolate; overflow: hidden; }
.in-cta-rings { position: absolute; inset: -60px 0; z-index: -1; background: url("../images/ellipses.svg") 78% 50% / 1100px auto no-repeat; opacity: .7; pointer-events: none; }
.in-cta .gs-art { right: -3%; top: 50%; translate: 0 -50%; width: min(30vw, 340px); aspect-ratio: 1; }
.in-cta .gs-btn-y { animation: gs-ring 3.4s ease-out 1.5s infinite; }
.in-cta .gs-btn-y:hover, .in-cta .gs-btn-y:focus-visible { animation-play-state: paused; }
@keyframes gs-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 55%, 100% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); } }
.in-cta > div:not(.gs-art), .in-cta .gs-btn { position: relative; z-index: 1; }

/* ── contact ── */
.in-info { position: relative; isolation: isolate; overflow: hidden; }
.in-info .gs-art { right: -70px; top: -50px; width: 260px; aspect-ratio: 1; }
.in-info > :not(.gs-art) { position: relative; z-index: 1; }
.in-info > .gs-btn-y { animation: gs-ring 3.4s ease-out 1.5s infinite; }
.in-info > .gs-btn-y:hover, .in-info > .gs-btn-y:focus-visible { animation-play-state: paused; }
.in-formbox { position: relative; overflow: hidden; }
.in-info .hm-copy { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; }
.in-info .hm-copy:hover { background: rgba(255, 255, 255, .22); }
.in-info .hm-copy.is-done { background: #1a9b53; border-color: #1a9b53; }
form[data-quiet].is-sent > :not(.hm-thanks) { display: none; }
.in-formbox:has(form[data-quiet].is-sent) > .gs-title { display: none; }

@media (prefers-reduced-motion: reduce) {
    .gs-banner .hm-word, .gs-banner .gs-crumbs, .gs-banner p, .gs-banner h1 { transition: none; }
    .in-cta .gs-btn-y, .in-info > .gs-btn-y, .in-gallery figure.is-loading::before { animation: none; }
    .in-steps::before { transition: none; }
}