/* ============================================================
   PATCHES — Load last; consolidated final state, no history.
   ------------------------------------------------------------
   INDICE
     1. HERO             scroll indicator · logo · motto
     2. M-ENTRY          mark sizing · explosion (desktop/mobile)
     3. NAV              mobile header · hero-passed state
     4. ARCHIVE          section spacing · atmospheric words
     5. PORTFOLIO CARDS  micro-rotation a riposo (archive/topshot)
     6. EYEBROW          color overrides
     7. RANDOMSHOT       panel · date · breathe · spotify · flip
                         (override mobile raggruppati in coda)
     8. CONTACT          CTA contestuale
   NB: i !important qui sono dettati dall'ordine di caricamento
       (patches.css precede archive.css; segue components.css).
   ============================================================ */

/* ============================================================
   1 · HERO — overflow + scroll indicator responsive
   ============================================================ */

.hero-scroll-indicator { z-index: 5; gap: clamp(5px, 0.8vh, 8px); }
.hero-scroll-indicator span { font-size: clamp(8px, 0.72vw, 9px); letter-spacing: clamp(.20em, .24vw, .28em); }
.scroll-arrow { width: clamp(14px, 1.05vw, 16px); height: clamp(14px, 1.05vw, 16px); }

@media (min-width: 769px) {
  .hero { overflow: visible !important; }
  .hero-scroll-indicator { bottom: clamp(-64px, -5.2vh, -44px) !important; }
}

/* HERO — logo responsive sizing */

@media (min-width: 769px) {
  .hero-logo-wrap { width: clamp(540px, 52vw, 820px) !important; top: clamp(22px, 2.5vh, 38px) !important; }
}
@media (min-width: 769px) and (max-width: 900px) {
  .hero-logo-wrap { width: clamp(500px, 68vw, 660px) !important; }
}
@media (min-width: 1500px) {
  .hero-logo-wrap { width: clamp(760px, 46vw, 920px) !important; }
}

/* HERO — motto handwrite responsive */

.hero-motto-handwrite { width: clamp(209px, 22.8vw, 302px) !important; }
@media (min-width: 769px)  { .hero-motto-handwrite { top: 52% !important; } }
@media (max-width: 768px)  { .hero-motto-handwrite { top: 43.8% !important; width: clamp(174px, 44.4vw, 242px) !important; } }
@media (max-width: 480px)  { .hero-motto-handwrite { top: 44.8% !important; width: clamp(162px, 49vw, 224px) !important; } }

/* ============================================================
   2 · M-ENTRY — mark responsive sizing
   ============================================================ */

.m-entry-mark { width: clamp(108px, 11vw, 176px) !important; }
@media (min-width: 1500px)                        { .m-entry-mark { width: clamp(150px, 10vw, 190px) !important; } }
@media (min-width: 769px) and (max-width: 1099px) { .m-entry-mark { width: clamp(122px, 15vw, 176px) !important; } }
@media (max-width: 768px) {
  .m-entry-mark { width: clamp(116px, 30vw, 168px) !important; }
  .m-entry-text { bottom: clamp(40px, 8vh, 76px) !important; }
}
@media (max-width: 430px) {
  .m-entry-mark { width: clamp(112px, 34vw, 160px) !important; }
  .m-entry-text { bottom: clamp(28px, 6.5vh, 52px) !important; }
}

/* M-ENTRY — explosion (desktop: BurstPx; mobile: MobileImpulse) */

.m-entry {
  --m-top-mid-x: 0px;    --m-top-mid-y: -180px;
  --m-top-end-x: 0px;    --m-top-end-y: -720px;
  --m-left-mid-x: -260px; --m-left-mid-y: 120px;
  --m-left-end-x: -760px; --m-left-end-y: 420px;
  --m-right-mid-x: 260px; --m-right-mid-y: 120px;
  --m-right-end-x: 760px; --m-right-end-y: 420px;
}
.m-entry.exploding .m-triangle-top   { animation: mTriangleTopBurstPx   .50s linear forwards !important; }
.m-entry.exploding .m-triangle-left  { animation: mTriangleLeftBurstPx  .50s linear forwards !important; }
.m-entry.exploding .m-triangle-right { animation: mTriangleRightBurstPx .50s linear forwards !important; }

@keyframes mTriangleTopBurstPx {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); opacity: 1; filter: blur(0) drop-shadow(0 0 10px rgba(255,255,255,.12)); }
  28%  { transform: translate3d(var(--m-top-mid-x),  var(--m-top-mid-y),  0) rotate(-10deg) scale(.94); opacity: .84; filter: blur(1.1px) drop-shadow(0 0 24px rgba(255,255,255,.18)); }
  100% { transform: translate3d(var(--m-top-end-x),  var(--m-top-end-y),  0) rotate(-24deg) scale(.76); opacity: 0;   filter: blur(4px)   drop-shadow(0 0 42px rgba(255,255,255,.22)); }
}
@keyframes mTriangleLeftBurstPx {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); opacity: 1; filter: blur(0) drop-shadow(0 0 10px rgba(255,255,255,.12)); }
  28%  { transform: translate3d(var(--m-left-mid-x), var(--m-left-mid-y), 0) rotate(-16deg) scale(.92); opacity: .84; filter: blur(1.2px) drop-shadow(0 0 26px rgba(255,255,255,.18)); }
  100% { transform: translate3d(var(--m-left-end-x), var(--m-left-end-y), 0) rotate(-38deg) scale(.70); opacity: 0;   filter: blur(4.4px) drop-shadow(0 0 42px rgba(255,255,255,.22)); }
}
@keyframes mTriangleRightBurstPx {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); opacity: 1; filter: blur(0) drop-shadow(0 0 10px rgba(255,255,255,.12)); }
  28%  { transform: translate3d(var(--m-right-mid-x),var(--m-right-mid-y),0) rotate(16deg)  scale(.92); opacity: .84; filter: blur(1.2px) drop-shadow(0 0 26px rgba(255,255,255,.18)); }
  100% { transform: translate3d(var(--m-right-end-x),var(--m-right-end-y),0) rotate(-38deg) scale(.70); opacity: 0;   filter: blur(4.4px) drop-shadow(0 0 42px rgba(255,255,255,.22)); }
}

@media (max-width: 768px) {
  .m-entry.exploding .m-triangle-top   { animation: mTriangleTopMobileImpulse   .42s linear forwards !important; }
  .m-entry.exploding .m-triangle-left  { animation: mTriangleLeftMobileImpulse  .42s linear forwards !important; }
  .m-entry.exploding .m-triangle-right { animation: mTriangleRightMobileImpulse .42s linear forwards !important; }

  @keyframes mTriangleTopMobileImpulse {
    0%   { transform: translate3d(0,0,0)       rotate(0deg)   scale(1);   opacity: 1;   filter: blur(0); }
    12%  { transform: translate3d(0,-34vh,0)   rotate(-10deg) scale(.92); opacity: .78; filter: blur(1px); }
    42%  { transform: translate3d(0,-76vh,0)   rotate(-20deg) scale(.78); opacity: .36; filter: blur(2.5px); }
    100% { transform: translate3d(0,-145vh,0)  rotate(-34deg) scale(.62); opacity: 0;   filter: blur(4.2px); }
  }
  @keyframes mTriangleLeftMobileImpulse {
    0%   { transform: translate3d(0,0,0)          rotate(0deg)   scale(1);   opacity: 1;   filter: blur(0); }
    12%  { transform: translate3d(-64vw,20vh,0)   rotate(-18deg) scale(.92); opacity: .78; filter: blur(1px); }
    42%  { transform: translate3d(-112vw,48vh,0)  rotate(-34deg) scale(.78); opacity: .36; filter: blur(2.6px); }
    100% { transform: translate3d(-190vw,82vh,0)  rotate(-56deg) scale(.60); opacity: 0;   filter: blur(4.4px); }
  }
  @keyframes mTriangleRightMobileImpulse {
    0%   { transform: translate3d(0,0,0)          rotate(0deg)  scale(1);   opacity: 1;   filter: blur(0); }
    12%  { transform: translate3d(64vw,20vh,0)    rotate(18deg) scale(.92); opacity: .78; filter: blur(1px); }
    42%  { transform: translate3d(112vw,48vh,0)   rotate(34deg) scale(.78); opacity: .36; filter: blur(2.6px); }
    100% { transform: translate3d(190vw,82vh,0)   rotate(56deg) scale(.60); opacity: 0;   filter: blur(4.4px); }
  }
}

/* ============================================================
   3 · NAV — mobile header (safe-area + compact layout)
   ============================================================ */

@media (max-width: 768px) {
  .site-header {
    padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
    padding-bottom: 13px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    min-height: calc(env(safe-area-inset-top, 0px) + 62px) !important;
    align-items: center !important;
  }
  .brand { margin-left: 0 !important; flex: 0 0 auto !important; }
  .brand-wordmark { height: 22px !important; width: auto !important; }
  .site-nav--mobile {
    flex: 1 1 auto !important; min-width: 0 !important;
    justify-content: space-between !important;
    gap: clamp(10px, 3.2vw, 18px) !important;
    padding-left: 30px !important; padding-right: 2px !important;
    font-size: clamp(10.2px, 2.75vw, 12px) !important;
    line-height: 1.2 !important;
  }
  .site-nav--mobile a { padding-top: 7px !important; padding-bottom: 7px !important; }
  .hero-scroll-indicator { bottom: 68px !important; }
}
@media (max-width: 390px) {
  .site-header { padding-left: 10px !important; padding-right: 10px !important; }
  .site-nav--mobile { gap: clamp(7px, 2.4vw, 12px) !important; padding-left: 24px !important; font-size: 10px !important; letter-spacing: .055em !important; }
  .hero-scroll-indicator { bottom: 60px !important; }
}

/* NAV — hero-passed state */

.site-header, .brand-wordmark, .site-nav a, .site-nav a::after {
  transition: background-color .32s ease, border-color .32s ease, box-shadow .32s ease,
              color .32s ease, opacity .32s ease, filter .32s ease, text-shadow .32s ease;
}
.site-header.hero-passed { background: rgba(10,10,10,.56); border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.site-header.hero-passed .brand-wordmark { opacity: .96; filter: drop-shadow(0 0 14px rgba(255,255,255,.12)); }
.site-header.hero-passed .site-nav a { color: rgba(255,255,255,.82); text-shadow: 0 0 14px rgba(255,255,255,.12); }
.site-header.hero-passed .site-nav a:hover { color: rgba(255,255,255,.98); text-shadow: 0 0 18px rgba(255,255,255,.18); }
.site-header.hero-passed .site-nav a::after { opacity: 0; transform: translateX(-50%) translateY(4px); }
.site-header.hero-passed .site-nav a:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   4 · ARCHIVE — section spacing
   ============================================================ */

#latest     { margin-bottom: 56px; }
#randomshot { margin-bottom: 56px; }
@media (max-width: 768px) {
  #latest     { margin-top: 32px; margin-bottom: 24px; }
  #randomshot { margin-bottom: 24px; }
}

/* ARCHIVE — panels: atmospheric background words */

#latest .archive-panel,
#topshots .archive-panel { position: relative; overflow: hidden; }

#latest .archive-topbar, #latest .archive-controls,
#latest .archive-grid,   #latest .archive-foot,
#topshots .archive-topbar, #topshots .archive-grid { position: relative; z-index: 1; }

#latest .archive-panel::after,
#topshots .archive-panel::after,
.randomshot-panel::after {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  filter: blur(9px);
  z-index: 0;
  width: 100%;
  text-align: center;
}
#latest .archive-panel::after   { content: "LATEST";  font-size: clamp(180px, 16vw, 320px); color: rgba(17,17,17,.065); }
#topshots .archive-panel::after { content: "POPULAR"; font-size: clamp(170px, 14vw, 300px); color: rgba(17,17,17,.065); }
.randomshot-panel::after {
  content: "TODAY";
  color: rgba(17,17,17,.07);
  font-size: clamp(80px, 26vw, 400px);
  left: 0;
  right: 0;
  width: 100%;
  transform: translateY(-50%);
}

/* ============================================================
   5 · PORTFOLIO CARDS — micro-rotation + organic offset at rest
   After components.css to win specificity on .progressive-img.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  .archive-card  img.progressive-img,
  .topshot-card  img.progressive-img {
    transform: scale(1.035);
    transition: filter 3.25s cubic-bezier(.16,.84,.24,1), opacity 2.85s ease, transform 2.4s cubic-bezier(.16,.84,.24,1);
  }
  .archive-card  img.progressive-img.high-ready,
  .topshot-card  img.progressive-img.high-ready { transform: scale(1.035); }

  .archive-card:hover  img.progressive-img,
  .archive-card:hover  img.progressive-img.high-ready,
  .topshot-card:hover  img.progressive-img,
  .topshot-card:hover  img.progressive-img.high-ready { transform: scale(1.048); }
}

/* ============================================================
   6 · EYEBROW — color overrides
   ============================================================ */

.eyebrow-dark { color: #af8570 !important; }
.randomshot-section .eyebrow { color: #111 !important; opacity: .72; }

/* ============================================================
   7 · RANDOMSHOT — panel layout + blurred background echo
   ============================================================ */

.archive-panel.randomshot-panel { background: #af8570; }
.randomshot-panel { position: relative; overflow: hidden; }
.randomshot-panel > .archive-topbar { flex: initial; margin-bottom: 18px; }
.randomshot-panel > * { position: relative; z-index: 2; }
.randomshot-panel::before {
  content: "";
  position: absolute; inset: -40px;
  background-image: var(--rs-blur-src, none);
  background-size: cover; background-position: center;
  filter: blur(52px); opacity: .24;
  z-index: 0; pointer-events: none;
}

/* RANDOMSHOT — date display */

.randomshot-date {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0; padding: 18px 18px 44px;
  background: linear-gradient(rgba(0,0,0,.62), transparent);
  font-family: var(--font-mono-a, 'Geist Mono', monospace);
  font-size: 10px; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.68); line-height: 1;
  text-shadow: 0 1px 6px rgba(0,0,0,.32);
}
.randomshot-date svg { display: none; }
.rsd-day   { display: none; }
.rsd-sep   { display: none; }
.rsd-num   { font-weight: 400; }
.rsd-month { }
.rsd-year  { opacity: .72; }

/* RANDOMSHOT CARD — breathe animation */

@keyframes randomShotBreathe {
  0%   { transform: scale(1.000); transform-origin: 50% 50%; }
  20%  { transform: scale(1.018); transform-origin: 58% 46%; }
  40%  { transform: scale(1.034); transform-origin: 52% 56%; }
  60%  { transform: scale(1.045); transform-origin: 44% 50%; }
  80%  { transform: scale(1.022); transform-origin: 50% 54%; }
  100% { transform: scale(1.000); transform-origin: 50% 50%; }
}
.randomshot-card img.progressive-img { animation: randomShotBreathe 22s ease-in-out infinite; will-change: transform; }
.randomshot-card:hover img.progressive-img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .randomshot-card img.progressive-img { animation: none; } }

/* RANDOMSHOT — Spotify trigger + embed */

/* wrap diventa grid per sovrapporre il bottone sulla card
   (unisce padding/width di base + display:grid) */
.randomshot-wrap { padding: 20px; width: 100%; display: grid; }

.randomshot-wrap > * { grid-area: 1 / 1; }
.rs-music-btn {
  align-self: start;
  justify-self: end;
  margin: 12px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255,255,255,.7);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
  transition: color .2s, background .2s;
}
.rs-music-btn:hover,
.rs-music-btn.active {
  color: #fff;
  background: rgba(0,0,0,.5);
}
.rs-music-btn span { display: none; }
.rs-music-btn svg { flex-shrink: 0; }
/* Spotify btn sul back face: absolute top-right (il wrap front usa grid, qui no) */
.rs-flip-back .rs-music-btn {
  position: absolute;
  top: 0; right: 0;
  margin: 12px;
  align-self: unset;
  justify-self: unset;
}

.rs-embed-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4, 0, .2, 1);
}
.rs-embed-wrap.open { max-height: 80px; }
.rs-embed-wrap iframe { display: block; width: 100%; height: 80px; border: none; }

/* RANDOMSHOT — flip card gemella (shot ↔ thought) */

/* Eyebrow crossfade shot ↔ thought — grid overlay: il wrap si dimensiona sul testo più lungo */
.rs-eyebrow-wrap { display: grid; }
.randomshot-section .rs-eyebrow--shot,
.randomshot-section .rs-eyebrow--thought {
  grid-area: 1 / 1;
  transition: opacity .45s ease;
  margin: 0;
}
.randomshot-section .rs-eyebrow--shot   { opacity: 0; }
.randomshot-section .rs-eyebrow--shot.rs-eyebrow--active  { opacity: 1; }
.randomshot-section .rs-eyebrow--thought { opacity: 0; }
.randomshot-section .rs-eyebrow--thought.rs-eyebrow--active { opacity: 1; }

.rs-flip-scene {
  perspective: 900px;
  position: relative;
  flex: 0 0 auto;
  width: clamp(320px, 42vw, 540px);
  margin: 0 auto;
}

/* Grid overlay: fronte e retro occupano lo stesso slot — il front determina l'altezza, il back si sovrappone assoluto */
.rs-flip-card {
  display: grid;
  width: 100%;
  position: relative;
}
.rs-flip-front,
.rs-flip-back { grid-area: 1 / 1; }

/* Half-flip: ogni faccia ruota solo 90° — nessun backface-visibility needed */
.rs-flip-front {
  transform: rotateY(0deg);
  transform-origin: center;
  transition: transform .42s cubic-bezier(.4, 0, .6, 1);
}
.rs-flip-front.rs-hiding { transform: rotateY(90deg); }
.rs-flip-front.rs-hidden { visibility: hidden; }

.rs-flip-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f5f0e8;
  position: absolute;
  inset: 20px;
  margin: 0;
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  transform: rotateY(-90deg);
  transform-origin: center;
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

/* Back face — eco blurrata della foto del giorno (div iniettato da JS) */
.rs-back-echo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(22px) saturate(0.65) brightness(1.22);
  opacity: 0.32;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}
/* Contenuto above l'eco */
.rs-flip-back .rs-thought-content { position: relative; z-index: 1; }

/* Data sulla thought card — stesso layout della photo card, adattato al fondo chiaro */
.rs-date-back {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0; padding: 18px 18px 44px;
  background: linear-gradient(rgba(42,31,16,.12), transparent);
  font-family: var(--font-mono-a, 'Geist Mono', monospace);
  font-size: 10px; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(42,31,16,.52); line-height: 1;
}
.rs-date-back svg { display: none; }
.rs-date-back .rsd-day  { display: none; }
.rs-date-back .rsd-sep  { display: none; }
.rs-date-back .rsd-year { opacity: .72; }
.rs-flip-back.rs-visible {
  transform: rotateY(0deg);
  pointer-events: auto;
}

.rs-thought-content {
  padding: clamp(24px, 4vw, 52px);
  text-align: center;
  color: #2a1f10;
  font-family: 'Caveat', cursive;
  font-size: clamp(23px, 2.2vw, 31px);
  font-weight: 500;
  line-height: 1.65;
  max-width: 620px;
}
.rs-thought-num { font-size: 11px !important; letter-spacing: .14em; opacity: .38; }

.rs-flash {
  position: absolute;
  inset: 20px;
  border-radius: 18px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.rs-flash.is-flashing { animation: rsFlash .55s ease-out forwards; }
@keyframes rsFlash {
  0%   { opacity: 0; }
  22%  { opacity: .88; }
  100% { opacity: 0; }
}

/* RANDOMSHOT — override mobile (≤768px) raggruppati */

@media (max-width: 768px) {
  /* panel + wrap */
  .randomshot-panel { text-align: left; align-items: flex-start; gap: 8px; }
  .randomshot-wrap { padding: 14px; }
  /* flip scene / card */
  .rs-flip-scene { width: 100%; margin: 0; }
  .rs-flip-card { min-height: 220px; }
  /* thought face */
  .rs-thought-content { font-size: clamp(20px, 5.8vw, 24px); padding: 20px 30px; }
  .rs-flip-back { inset: 14px; margin: 0; }
  .rs-flash { inset: 14px; }
  /* Riduci aria tra titolo e card — !important necessario: archive.css carica dopo patches.css */
  .randomshot-section .archive-topbar { padding-top: 16px !important; padding-bottom: 4px !important; margin-bottom: 0 !important; }
  /* Data back face: allinea visivamente con la data della photo card */
  .rs-date-back { padding-top: 21px; }
}

/* ============================================================
   8 · CONTACT CARD — CTA contestuale per servizio
   ============================================================ */

.contact-card-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 0;
  background: none;
  border: none;
  color: #c8a882;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .2s, letter-spacing .2s;
}
.contact-card-cta:hover {
  color: #d4b894;
  letter-spacing: .1em;
}