/* ==========================================================
   IMAZE — stili personalizzati (si aggiungono a Tailwind)
   Palette: #e12354 rosa · #ffffff bianco · #17160f nero
   ========================================================== */

/* Font ufficiale IMAZE: Safiro (file in assets/fonts) */
@font-face { font-family: 'Safiro'; font-weight: 400; font-style: normal; font-display: swap; src: url('../assets/fonts/Safiro-Regular.otf') format('opentype'); }
@font-face { font-family: 'Safiro'; font-weight: 400; font-style: italic; font-display: swap; src: url('../assets/fonts/Safiro-RegularItalic.otf') format('opentype'); }
@font-face { font-family: 'Safiro'; font-weight: 500; font-style: normal; font-display: swap; src: url('../assets/fonts/Safiro-Medium.otf') format('opentype'); }
@font-face { font-family: 'Safiro'; font-weight: 500; font-style: italic; font-display: swap; src: url('../assets/fonts/Safiro-MediumItalic.otf') format('opentype'); }
@font-face { font-family: 'Safiro'; font-weight: 600; font-style: normal; font-display: swap; src: url('../assets/fonts/Safiro-SemiBold.otf') format('opentype'); }
@font-face { font-family: 'Safiro'; font-weight: 600; font-style: italic; font-display: swap; src: url('../assets/fonts/Safiro-SemiBoldItalic.otf') format('opentype'); }
@font-face { font-family: 'Safiro'; font-weight: 700; font-style: normal; font-display: swap; src: url('../assets/fonts/Safiro-Bold.otf') format('opentype'); }
@font-face { font-family: 'Safiro'; font-weight: 700; font-style: italic; font-display: swap; src: url('../assets/fonts/Safiro-BoldItalic.otf') format('opentype'); }

  #imaze { font-family: 'Safiro', Arial, sans-serif; color: #17160f; overflow-x: hidden; }
  #imaze h1, #imaze h2, #imaze h3 { font-family: 'Safiro', Arial, sans-serif; text-transform: uppercase; font-weight: 700; margin: 0; }
  #imaze .font-hand { font-family: 'Safiro', Arial, sans-serif; font-style: italic; font-weight: 600; }
  #imaze button, #imaze input, #imaze textarea, #imaze select { font-family: inherit; }
  #imaze h3.font-body { font-family: 'Safiro', Arial, sans-serif; text-transform: none; }
  #imaze a { text-decoration: none; }
  #imaze :focus-visible { outline: 3px solid #e12354; outline-offset: 3px; }
  #imaze .on-rosa :focus-visible { outline-color: #17160f; }
  /* Riquadri foto: se il file in assets/img esiste si vede la foto, altrimenti resta il gradiente */
  #imaze .ph { position: relative; background: linear-gradient(160deg, #e12354 0%, #17160f 100%); background-size: cover; background-position: center; }
  #imaze .ph.bw { background: linear-gradient(160deg, #6b6a63 0%, #17160f 100%); }
  #imaze .ph::after { content: attr(data-label); position: absolute; left: 8px; bottom: 8px; font-size: 11px; color: #fff; opacity: .7; }
  #imaze .tape { position: absolute; width: 110px; height: 30px; background: #e12354; opacity: .9; }
#imaze .stage{--fs:13.4cqw;--B:.9236;position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;width:min(100%,calc((100svh - 88px) * 1.7083));aspect-ratio:1640/960}
#imaze .titolo-hero{position:absolute;inset:0;pointer-events:none}
#imaze .hl{position:absolute;left:10cqw;margin:0;display:block;font-family:'Safiro',Arial,sans-serif;font-weight:700;font-size:var(--fs);line-height:1;white-space:nowrap;color:#fff;transform-origin:0 calc(var(--B) * 1em);transform:none;z-index:1}
#imaze .hl1{top:calc(20cqw - var(--B) * var(--fs))}
#imaze .hl2{top:calc(38cqw - var(--B) * var(--fs))}
#imaze .hl3{top:calc(56cqw - var(--B) * var(--fs))}
#imaze .light{position:absolute;z-index:2;left:49cqw;top:1.46cqw;width:54cqw;height:auto;max-width:none;pointer-events:none;user-select:none}
@media (max-width:767px){
  #imaze .stage{width:min(100%,calc((100svh - 76px) / 1.65));aspect-ratio:100/165;--fs:15.5cqw}
  #imaze .hl{left:8cqw}
  #imaze .hl1{top:calc(32cqw - var(--B) * var(--fs))}
  #imaze .hl2{top:calc(58.4cqw - var(--B) * var(--fs))}
  #imaze .hl3{top:calc(84.6cqw - var(--B) * var(--fs))}
  #imaze .light{left:8cqw;top:88cqw;width:90cqw}
}
/* Safiro ha proporzioni più larghe del vecchio display: contenere i titoli nelle loro colonne. */
#imaze #spazio h2{font-size:clamp(3.5rem,5.8vw,5.3rem);line-height:.94;letter-spacing:-.055em}
#imaze .shoot-heading{font-size:clamp(3.2rem,7vw,8rem);line-height:.93;letter-spacing:-.055em;max-width:100%}
#imaze .shoot-heading span{display:block}
#imaze .shoot-aside .font-hand{font-size:clamp(1.25rem,1.6vw,1.75rem);line-height:1.2;transform:rotate(-3deg)}
#imaze .shoot-aside a{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
@media (max-width:767px){
  #imaze #spazio h2{font-size:clamp(3.5rem,12vw,5.3rem)}
  #imaze .shoot-heading{font-size:clamp(3.2rem,10vw,5rem)}
}
@media (prefers-reduced-motion: no-preference){
  #imaze .hl{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
  #imaze .hl2{animation-delay:.12s}
  #imaze .hl3{animation-delay:.24s}
  @keyframes rise{from{translate:0 3cqw;opacity:0}to{translate:none;opacity:1}}
}
  /* =========================================================
     ANIMAZIONI
     Tutte le animazioni di movimento sono dentro
     "prefers-reduced-motion: no-preference": chi ha "riduci movimento"
     attivo nel sistema vede la pagina ferma.
     ========================================================= */

  /* Barra di avanzamento della lettura (in alto, rosa) */
  #imaze .progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: #e12354; transform: scaleX(0); transform-origin: 0 50%; z-index: 60; pointer-events: none; }

  /* Voci di menu: la sottolineatura si disegna al passaggio del mouse */
  #imaze .nav-link { background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat; padding-bottom: 4px; transition: background-size .3s ease, color .2s; }
  #imaze .nav-link:hover { background-size: 100% 2px; }

  /* Campi del form */
  #imaze input, #imaze textarea, #imaze select { transition: border-color .25s ease; }

  /* Foto delle card: zoom leggero al passaggio del mouse */
  #imaze .ph { overflow: hidden; }
  #imaze .ph img { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
  #imaze article:hover .ph img, #imaze a.tipo:hover .ph img { transform: scale(1.07); }

  /* Inquadratura di camera: grafica sovrapposta al set, senza bloccare i clic. */
  #imaze .camera-ui { position:absolute; inset:5% 4%; z-index:5; pointer-events:none; color:#fff; font-family:'Safiro',Arial,sans-serif; font-size:clamp(9px,1.2cqw,14px); font-weight:700; letter-spacing:.12em; text-shadow:0 1px 5px #17160f99; }
  #imaze .camera-corner { position:absolute; width:5%; height:8%; border-color:#fff; border-style:solid; opacity:.88; }
  #imaze .camera-corner.tl { top:0; left:0; border-width:2px 0 0 2px; }
  #imaze .camera-corner.tr { top:0; right:0; border-width:2px 2px 0 0; }
  #imaze .camera-corner.bl { bottom:0; left:0; border-width:0 0 2px 2px; }
  #imaze .camera-corner.br { bottom:0; right:0; border-width:0 2px 2px 0; }
  #imaze .camera-rec, #imaze .camera-format, #imaze .camera-exposure { position:absolute; display:flex; align-items:center; gap:.6em; }
  #imaze .camera-rec { top:3%; left:3%; }
  #imaze .camera-rec i { width:.7em; height:.7em; border-radius:50%; background:#fff; box-shadow:0 0 8px #fff; }
  #imaze .camera-rec small { font:inherit; opacity:.75; margin-left:.4em; }
  #imaze .camera-format { top:3%; right:3%; }
  #imaze .camera-exposure { bottom:3%; right:3%; }
  #imaze .focus-frame { position:absolute; left:64%; top:30%; width:15%; aspect-ratio:1; border:1px solid #fff9; box-shadow:inset 0 0 0 1px #ffffff30; }
  #imaze .focus-frame::before, #imaze .focus-frame::after { content:''; position:absolute; background:#fff; left:50%; top:50%; transform:translate(-50%,-50%); }
  #imaze .focus-frame::before { width:18%; height:1px; }
  #imaze .focus-frame::after { width:1px; height:18%; }
  #imaze .shutter-flash { position:absolute; inset:0; z-index:6; pointer-events:none; background:#fff; opacity:0; }
  @media (max-width:767px) {
    #imaze .camera-ui { inset:3% 5%; font-size:10px; }
    #imaze .camera-rec small, #imaze .camera-format { display:none; }
    #imaze .focus-frame { left:36%; top:65%; width:27%; }
  }
  @media (prefers-reduced-motion:no-preference) {
    #imaze .focus-frame { transition:left .16s ease-out, top .16s ease-out; }
    #imaze .focus-frame { animation: focus-pull 6s ease-in-out infinite; }
    #imaze .camera-rec i { animation: rec-pulse 1.5s steps(1,end) infinite; }
    #imaze .shutter-flash { animation: camera-flash 6s steps(1,end) infinite; }
    @keyframes focus-pull { 0%,20%,100% { transform:scale(1.22); opacity:.45; } 30%,84% { transform:scale(1); opacity:1; } }
    @keyframes rec-pulse { 50% { opacity:.25; } }
    @keyframes camera-flash { 0%,37%,40%,100% { opacity:0; } 38% { opacity:.8; } 39% { opacity:.2; } }
  }

  /* Ticker come una pellicola: i fori restano fermi, i fotogrammi scorrono. */
  #imaze .marquee { position:relative; isolation:isolate; overflow:hidden; background:#17160f; color:#fff; border-top:2px solid #17160f; border-bottom:2px solid #17160f; }
  #imaze .marquee::before, #imaze .marquee::after { content:''; position:absolute; z-index:2; left:0; right:0; height:9px; pointer-events:none; background:radial-gradient(ellipse 12px 4px at 12px 4px, #fff 95%, transparent 100%) repeat-x; background-size:44px 9px; }
  #imaze .marquee::before { top:6px; }
  #imaze .marquee::after { bottom:6px; }
  #imaze .marquee-track { display:flex; width:max-content; }
  #imaze .marquee-set { display:flex; align-items:stretch; gap:0; padding:21px 0; font-family:'Safiro',Arial,sans-serif; font-weight:700; text-transform:uppercase; white-space:nowrap; font-size:clamp(1.4rem,3vw,2.5rem); line-height:1; }
  #imaze .marquee-set span { display:flex; align-items:center; justify-content:center; min-width:clamp(150px,19vw,270px); padding:14px 20px; margin:0 4px; border:1px solid #fff8; background:#17160f; color:#fff; box-shadow:inset 0 0 0 3px #17160f, inset 0 0 0 4px #fff5; }
  #imaze .marquee-set span:nth-of-type(5n+1) { background:#e12354; color:#fff; border-color:#e12354; box-shadow:inset 0 0 0 3px #e12354, inset 0 0 0 4px #fff8; }
  #imaze .marquee-set span:nth-of-type(5n+2) { background:#fff; color:#17160f; border-color:#fff; box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 4px #17160f55; }
  #imaze .marquee-set span:nth-of-type(5n+3) { background:#17160f; color:#fff; }
  #imaze .marquee-set span:nth-of-type(5n+4) { background:#fff; color:#17160f; border-color:#fff; box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 4px #e12354; }
  #imaze .marquee-set span:nth-of-type(5n+5) { background:#17160f; color:#ff7396; border-color:#e12354; box-shadow:inset 0 0 0 3px #17160f, inset 0 0 0 4px #e12354; }
  #imaze .marquee-set i { display:none; }

  /* FAQ: mentre si chiude, il "+" torna subito a posto */
  #imaze details[data-chiudendo] .plus { transform: none; }

  html { scroll-behavior: smooth; }

  @media (prefers-reduced-motion: no-preference) {
    #imaze .glow { animation: respiro 3.6s ease-in-out infinite alternate; }
    @keyframes respiro { from { opacity: .25; scale: .9; } to { opacity: .85; scale: 1.12; } }

    #imaze .marquee-track { animation: scorri 34s linear infinite; }
    #imaze .marquee:hover .marquee-track { animation-play-state: paused; }
    @keyframes scorri { to { transform: translateX(-50%); } }

    #imaze .rec-dot { animation: lampeggia 1.4s steps(1) infinite; }
    @keyframes lampeggia { 50% { opacity: 0; } }

    /* Comparsa allo scroll: la classe .anim viene messa da script.js */
    #imaze.anim [data-reveal] {
      opacity: 0; translate: 0 32px;
      transition: opacity .8s ease, translate .9s cubic-bezier(.2,.8,.2,1), transform .5s ease, background-color .3s, color .3s;
      transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms, 0ms, 0ms;
    }
    #imaze.anim [data-reveal].is-in { opacity: 1; translate: 0 0; }
    /* Titoli: risalgono da sotto come una "maschera" (lo span .wipe-in lo crea script.js) */
    #imaze.anim [data-reveal="wipe"] { opacity: 1; translate: none; transition: none; }
    #imaze.anim [data-reveal="wipe"] > .wipe-in { display: block; translate: 0 40px; clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(.7,0,.2,1), translate 1s cubic-bezier(.2,.8,.2,1); }
    #imaze.anim [data-reveal="wipe"].is-in > .wipe-in { translate: 0 0; clip-path: inset(-12% -6% -12% -6%); }
    /* Sottolineature rosa: si disegnano da sinistra */
    #imaze.anim [data-reveal="draw"] { opacity: 1; translate: none; scale: 0 1; transform-origin: left center; transition: scale .8s cubic-bezier(.7,0,.2,1) .3s; transition-delay: .3s; }
    #imaze.anim [data-reveal="draw"].is-in { scale: 1 1; }
  }

  #imaze details > summary { list-style: none; cursor: pointer; }
  #imaze details > summary::-webkit-details-marker { display: none; }
  #imaze details[open] .plus { transform: rotate(45deg); }
  @media (prefers-reduced-motion: no-preference) {
    #imaze .plus { transition: transform .2s; }
  }
  #imaze .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
  #imaze .ph::after { z-index: 0; }