/* ============================================================================
   AWWWARDS MOTION SYSTEM — motion.css
   Drop-in foundation. Pair with motion.js.
   Replace the palette + fonts per the chosen DNA (see references/design-dna.md).
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* --- fluid rem root: everything scales with the viewport --------------- */
  --fsize: 1.0416667vw;          /* = 20px @1920 */

  /* --- motion (mirrors the CustomEases registered in motion.js) ---------- */
  --dur-s: .4s;
  --dur-m: .8s;
  --dur-l: 1.2s;
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-out:    cubic-bezier(.25, 1, .5, 1);
  --ease-in:     cubic-bezier(.5, 0, .75, 0);
  --ease:        cubic-bezier(.25, .1, .25, 1);
  --ease-back:   cubic-bezier(.34, 1.56, .64, 1);

  /* --- viewport spacing scale ------------------------------------------- */
  --vert-ratio: 1;
  --oriz-ratio: 1;
  --c1v: calc(1.25vw * var(--vert-ratio));  --c1o: calc(1.25vw * var(--oriz-ratio));
  --c2v: calc(2.5vw  * var(--vert-ratio));  --c2o: calc(2.5vw  * var(--oriz-ratio));
  --c3v: calc(3.75vw * var(--vert-ratio));  --c3o: calc(3.75vw * var(--oriz-ratio));
  --c5v: calc(5vw    * var(--vert-ratio));  --c5o: calc(5vw    * var(--oriz-ratio));
  --c7v: calc(7.5vw  * var(--vert-ratio));  --c7o: calc(7.5vw  * var(--oriz-ratio));
  --c10v: calc(10vw  * var(--vert-ratio));  --c10o: calc(10vw  * var(--oriz-ratio));
  --c15v: calc(15vw  * var(--vert-ratio));  --c15o: calc(15vw  * var(--oriz-ratio));

  /* --- palette: REPLACE per DNA ----------------------------------------- */
  --bg:  #F3F3EC;
  --ink: #17233B;
  --accent: #B5CEDB;
  --ink-60: color-mix(in srgb, var(--ink) 60%, transparent);
  --ink-30: color-mix(in srgb, var(--ink) 30%, transparent);
  --ink-10: color-mix(in srgb, var(--ink) 10%, transparent);
  --ink-05: color-mix(in srgb, var(--ink)  5%, transparent);

  /* --- viewport height that ignores mobile browser chrome (set by JS) ---- */
  --_100svh: 100vh;
}

@media (min-width: 1921px) { :root { --fsize: 20px; } }
@media (max-width: 1366px) { :root { --fsize: 1.25vw; } }
@media (max-width:  991px) {
  /* sui telefoni la scala del tablet non scende sotto i 14px, altrimenti i testi diventano illeggibili */
  :root { --fsize: max(2.604vw, 14px); --vert-ratio: .6; --oriz-ratio: .5; }
}

/* -------------------------------------------------------------- 2. RESET-ISH */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--fsize);
  background: var(--bg);
  color: var(--ink);
  scrollbar-width: none;
  overflow-x: clip;
}
html::-webkit-scrollbar { display: none; }

body { margin: 0; line-height: 1; -webkit-font-smoothing: antialiased; }

img, video, picture, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }

::selection { color: var(--bg); background: var(--ink); }

.unset-all { all: unset; }
.scrollbar-none::-webkit-scrollbar { display: none; }
.clip-y { overflow-y: clip; }

/* ------------------------------------------------- 3. ANTI-FLICKER / INITIALS */

/* REQUIRED in <head>, before this stylesheet:
     <script>document.documentElement.classList.add('js')</script>
   Everything below is scoped to .js so the page stays readable without JS. */

html.js [data-prevent-flicker] { visibility: hidden; }
[data-master-preloader], [data-preloader] { display: block; }

/* motion.js sets visibility:visible at bind time, after the initial state is set */
html.js [data-scroll-reveal]:not([data-scroll-reveal="w"]),
html.js [data-part] { visibility: hidden; }

[data-parallax="img"], [data-parallax="img-out"], [data-parallax="img-in"],
[data-scroll-reveal="a"], [data-scroll-reveal="h"], [data-scroll-reveal="p"],
[data-scroll-reveal="slide"], [data-scroll-reveal="ctn"] { will-change: transform; }

.split-line, .split-word, .split-char { will-change: transform; }

/* ------------------------------------------------------------- 4. STRUCTURE */

/* media frame + counter-moving inner: the universal image reveal shape */
[data-parallax="w"], .media {
  position: relative;
  overflow: hidden;
  display: block;
}
[data-parallax="w"] > img,
[data-parallax="w"] > video,
.media > img, .media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* animatable clip via custom property (nib pattern) */
.media { --clipPath: 0% 0% 0% 0%; clip-path: inset(var(--clipPath)); }

/* dark overlay for video heroes (DNA C) */
.filter-black { position: absolute; inset: 0; background: #1e1e1e; opacity: .5; pointer-events: none; }
.filter-blur  { background: rgb(10 10 10 / 75%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* horizontal scroll track */
.h-scroll-area { position: relative; }
.h-scroll-area_track { display: flex; width: max-content; position: sticky; top: 0; height: 100svh; align-items: center; }
.h-scroll-area_track > * { flex: 0 0 auto; }

/* corner-notched frame (DNA A) */
.frame {
  border: 1px solid var(--ink-10);
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}

/* the one shadow: floating cards only */
.elev {
  box-shadow:
    0 224px 63px rgba(0,0,0,0),
    0 143px 57px rgba(0,0,0,.01),
    0  81px 48px rgba(0,0,0,.04),
    0  36px 36px rgba(0,0,0,.07),
    0   9px 20px rgba(0,0,0,.08);
}

/* ------------------------------------------------------ 5. HOVER COMPONENTS */
/* State lives in CSS variables; children just read them. */

[hover-btn] {
  --btn-dur: var(--dur-m);
  --btn-ease: var(--ease-in-out);
  --btn-text-c: var(--ink);
  --btn-bg-t: 100%;
  --btn-bg-br: 100%;
  position: relative;
  display: inline-flex;          /* required: inline elements ignore overflow/height */
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: var(--btn-dur) var(--btn-ease);
}
[hover-btn] [hover="text"], [hover-btn] .ico {
  position: relative; z-index: 2;
  color: var(--btn-text-c);
  transition: var(--btn-dur) var(--btn-ease);
}
[hover-btn] [hover="bg"] {
  position: absolute; z-index: 1;
  inset: var(--btn-bg-t) 0% auto;
  height: 100%;
  background: var(--ink);
  border-radius: var(--btn-bg-br);
  transition: var(--btn-dur) var(--btn-ease);
}
@media (min-width: 992px) {
  [hover-btn]:hover, [hover-btn-trigger]:hover [hover-btn] {
    --btn-text-c: var(--bg);
    --btn-bg-t: 0%;
    --btn-bg-br: 0%;
  }
}

[hover-card] { --img-sc: 1; }
[hover-card] [hover="img"] { transform: scale(var(--img-sc)); transition: 1.6s var(--ease-out); }
@media (min-width: 992px) { [hover-card]:hover { --img-sc: 1.05; } }

[hover-social] { --ico-s: 1; }
[hover-social] [hover="ico"] { scale: var(--ico-s); transition: var(--dur-m) var(--ease-out); }
@media (min-width: 992px) { [hover-social]:hover, [hover-social-trigger]:hover [hover-social] { --ico-s: 1.25; } }

/* underline that retracts right / regrows left */
[hover-link] { position: relative; display: inline-block; }
.link_line {
  position: absolute; left: 0; bottom: 0;
  display: block; width: 100%; height: 1px;
  background: currentColor;
}

/* CSS-only sweep alternative */
.link-sweep { position: relative; display: inline-flex; align-items: center; gap: .5rem; }
.link-sweep::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: center left;
  transition: transform .7s cubic-bezier(.52, 0, 0, 1);
}
.link-sweep:hover::after { transform: scaleX(1); transform-origin: center right; }

/* group dimming */
[data-hover-item] { transition: opacity var(--dur-m) var(--ease-out); }
[data-hover-group]:has([data-hover-item]:hover) [data-hover-item]:not(:hover):not(.is-active) {
  opacity: .2;
}

/* tabs */
[hover-tab] { opacity: .3; transition: var(--dur-s) var(--ease-out); }
[hover-tab].is-active { opacity: 1; pointer-events: none; }
@media (min-width: 992px) { [hover-tab]:hover { opacity: 1; } }

/* select / dropdown */
[data-select] {
  --dd-o: 0; --dd-s: 1.1; --dd-y: var(--c1v); --ico-r: 0deg;
  position: relative;
}
[data-select] [data-select="drop-down"] {
  opacity: var(--dd-o); scale: var(--dd-s);
  transform: translateY(var(--dd-y));
  pointer-events: none;
  transition: none;
}
[data-select].is-open {
  --dd-o: 1; --dd-s: 1; --dd-y: 0px; --ico-r: 180deg;
}
[data-select].is-open [data-select="drop-down"] {
  pointer-events: auto;
  transition: var(--dur-m) var(--ease-out);
}
[data-select] [data-select="btn"] [hover="ico"] { rotate: var(--ico-r); transition: var(--dur-s) var(--ease-out); }

[data-reset] { transition: var(--dur-s) var(--ease-out); }
[data-reset].is-disabled { opacity: .3; pointer-events: none; }

/* -------------------------------------------------- 6. CLASS-TOGGLE REVEALS */
/* Cheap alternative to tweens for simple section entrances (DNA C). */

.sec-trigger.reveal-img picture,
.sec-trigger.reveal-img .media { clip-path: inset(0 0 0 100%); transition: 2s var(--ease-in-out); }
.sec-trigger.reveal-img.from-right picture,
.sec-trigger.reveal-img.from-right .media { clip-path: inset(0 100% 0 0); }
.sec-trigger.reveal-img img {
  transform: scale(1.6); opacity: 0;
  transition: 3s var(--ease-in-out) -.25s, opacity .1s ease;
  will-change: transform;
}
.sec-trigger.is-active.reveal-img picture,
.sec-trigger.is-active.reveal-img .media { clip-path: inset(0 0 0 0); }
.sec-trigger.is-active.reveal-img img { transform: scale(1); opacity: 1; }

.sec-trigger.reveal-fade { opacity: 0; transition: .875s ease; }
.sec-trigger.is-active.reveal-fade { opacity: 1; }

/* ------------------------------------------------------------- 7. SCROLLBAR */

[data-s-bar] { --progress: 0%; position: fixed; }
[data-s-bar-thumb] { top: var(--progress); cursor: grab; }
[data-s-bar-fill]  { clip-path: rect(0% 100% calc(var(--progress) - var(--c1v)) 0%); }
[data-s-bar-track] { clip-path: rect(calc(var(--progress) + var(--c1v)) 100% 100% 0%); }

/* ---------------------------------------------------------------- 8. CURSOR */

#cursor {
  position: fixed; top: 0; left: 0; z-index: 10000;
  width: .75rem; height: .75rem;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: width .33s var(--ease-back), height .33s var(--ease-back),
              background-color .33s var(--ease-back);
}
#cursor > div {
  position: relative; width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  background: var(--accent); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#cursor span {
  opacity: 0; white-space: nowrap; text-transform: uppercase;
  font-size: .55rem; letter-spacing: .2em; line-height: 1.1;
  transition: opacity .33s var(--ease-back);
}
@media (max-width: 991px), (pointer: coarse) { #cursor { display: none; } }

/* image-follow layer */
.follow-layer { position: absolute; pointer-events: none; transform: translate(-50%, -50%); z-index: 1; }
.follow-layer img {
  position: absolute; top: 0; left: 0;
  opacity: 0; transform: scale(.9);
  transition: .6s cubic-bezier(.52, 0, 0, 1);
}
.follow-layer img.is-visible { opacity: 1; transform: scale(1); }

/* --------------------------------------------------------------- 9. HEADER */

.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; transition: transform .25s ease-out; }
.site-header.is-hidden { transform: translateY(-100%); }
[data-theme] .logo, [data-theme] .label, [data-theme] .ico {
  transition: color var(--dur-s) var(--ease-out), background-color var(--dur-s) var(--ease-out);
}
.theme_on-light { --ui: var(--ink); }
.theme_on-dark, .theme_on-color { --ui: var(--bg); }

/* -------------------------------------------------------------- 10. MARQUEE */

[data-marquee] { overflow: hidden; }
[data-marquee] [data-marquee="track"] {
  display: flex; width: max-content;
  will-change: transform;
  animation: marquee 32s linear infinite reverse;
}
@keyframes marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0%); }
}

/* ------------------------------------------------------------ 11. FLOATING */

.floating-tip { visibility: hidden; }
.floating-tip .floating-tip-card {
  --tip-x: var(--c1o);
  scale: .75; opacity: 0;
  transform: translateX(var(--tip-x)) translateY(-50%);
  transition: var(--dur-s) var(--ease-in);
}
.floating-tip.is-active { visibility: visible; }
.floating-tip.is-active .floating-tip-card { scale: 1; opacity: 1; transition: var(--dur-m) var(--ease-out); }
.floating-tip.is-left .floating-tip-card { --tip-x: calc(-100% - var(--c1o)); }

/* ---------------------------------------------------------- 12. GUARDS / A11Y */

@media screen and (orientation: landscape) and (max-width: 991px)
   and (pointer: coarse) and (hover: none) {
  .landscape-cover { display: block; }
  body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-scroll-reveal], [data-part] { visibility: visible !important; opacity: 1 !important; }
  [data-marquee] [data-marquee="track"] { animation: none; }
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}