/* Copyright (C) Gregorio Antonio Curello e Gruppo Fotografico Curello. */
:root{
      --ink:#08090b;
      --paper:#f7f3ef;
      --white:#ffffff;
      --fog:rgba(255,255,255,.72);
      --dim:rgba(255,255,255,.52);
      --line:rgba(255,255,255,.13);
      --line-strong:rgba(255,255,255,.22);
      --panel:rgba(11,13,16,.82);
      --panel-soft:rgba(255,255,255,.055);
      --magenta:#ff8cf6;
      --green:#79ffd0;
      --cyan:#a9dcff;
      --gold:#ffcc70;
      --red:#ff5959;
      --max:1180px;
      --focus:0 0 0 3px rgba(121,255,208,.35), 0 0 0 1px rgba(255,255,255,.22);
    }

    *{ box-sizing:border-box; margin:0; padding:0; }
    html{ scroll-behavior:smooth; }
    body{
      min-height:100vh;
      color:var(--white);
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 18rem),
        repeating-linear-gradient(90deg, rgba(255,255,255,.024) 0 1px, transparent 1px 82px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 82px),
        #08090b;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      overflow-x:hidden;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      z-index:-3;
      opacity:.35;
      pointer-events:none;
      background-image:url("/tropea_in_camera/assets/story/group-20.webp");
      background-size:cover;
      background-position:center;
      filter:grayscale(1) contrast(1.15) brightness(.34);
      transform:scale(1.05);
    }

    body::after{
      content:"";
      position:fixed;
      inset:0;
      z-index:-2;
      pointer-events:none;
      background:
        linear-gradient(90deg, rgba(8,9,11,.96), rgba(8,9,11,.7) 48%, rgba(8,9,11,.96)),
        linear-gradient(180deg, rgba(8,9,11,.4), #08090b 86%);
    }

    a{ color:inherit; text-decoration:none; }
    button{ font:inherit; color:inherit; }
    img, video{ max-width:100%; display:block; }
    :focus-visible{ outline:none; box-shadow:var(--focus); border-radius:10px; }

    .skip{
      position:absolute;
      left:12px;
      top:10px;
      z-index:100;
      padding:10px 14px;
      border:1px solid var(--line);
      background:#111;
      transform:translateY(-170%);
      transition:.18s ease;
    }
    .skip:focus{ transform:translateY(0); }

    .progress{
      position:fixed;
      top:0;
      left:0;
      z-index:90;
      width:100%;
      height:3px;
      background:rgba(255,255,255,.08);
    }
    .progress span{
      display:block;
      width:0%;
      height:100%;
      background:linear-gradient(90deg, var(--magenta), var(--green), var(--cyan), var(--gold));
      box-shadow:0 0 22px rgba(121,255,208,.38);
    }

    .cursor-light{
      position:fixed;
      inset:0;
      z-index:-1;
      pointer-events:none;
      background:linear-gradient(115deg, transparent 0 34%, rgba(255,140,246,.12), rgba(121,255,208,.08), transparent 66% 100%);
      mask-image:radial-gradient(260px 260px at var(--x, 50%) var(--y, 20%), #000, transparent 78%);
      -webkit-mask-image:radial-gradient(260px 260px at var(--x, 50%) var(--y, 20%), #000, transparent 78%);
    }

    .noise{
      position:fixed;
      inset:0;
      z-index:-1;
      opacity:.16;
      pointer-events:none;
      mix-blend-mode:screen;
      background-image:
        linear-gradient(115deg, transparent 0 45%, rgba(255,255,255,.12) 45% 46%, transparent 46% 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
    }

    .wrap{ width:min(var(--max), calc(100% - 34px)); margin:0 auto; }

    header{
      position:sticky;
      top:0;
      z-index:60;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(8,9,11,.72);
      backdrop-filter:blur(18px);
    }
    .top{
      height:72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
      font-weight:950;
      letter-spacing:.02em;
      text-transform:uppercase;
      font-size:.78rem;
    }
    .brand img{ width:40px; height:40px; object-fit:contain; }
    .brand span{ color:rgba(255,255,255,.82); }

    nav{ display:flex; align-items:center; gap:8px; }
    .nav-link,
    .icon-btn,
    .cta,
    .chip,
    .episode-btn{
      min-height:44px;
      border:1px solid rgba(255,255,255,.13);
      background:rgba(255,255,255,.045);
      cursor:pointer;
      transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      padding:0 13px;
      font-size:.82rem;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .nav-link:hover,
    .icon-btn:hover,
    .chip:hover,
    .episode-btn:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08); }
    .cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      padding:0 15px;
      font-weight:950;
      text-transform:uppercase;
      letter-spacing:.02em;
      background:var(--white);
      color:#090a0c;
      border-color:transparent;
    }
    .cta:hover{ transform:translateY(-2px); background:var(--green); }
    .soon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:0 15px;
      border:1px solid rgba(121,255,208,.28);
      background:rgba(121,255,208,.08);
      color:var(--green);
      font-weight:1000;
      text-transform:uppercase;
      letter-spacing:.04em;
      cursor:default;
      white-space:nowrap;
    }

    .icon-btn{
      width:46px;
      height:46px;
      display:none;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.06);
    }
    .icon-btn span,
    .icon-btn span::before,
    .icon-btn span::after{
      display:block;
      width:19px;
      height:2px;
      background:var(--white);
      content:"";
      position:relative;
    }
    .icon-btn span::before{ position:absolute; top:-6px; }
    .icon-btn span::after{ position:absolute; top:6px; }

    .mobile-menu{
      position:fixed;
      top:78px;
      right:17px;
      width:min(340px, calc(100vw - 34px));
      z-index:70;
      border:1px solid rgba(255,255,255,.13);
      background:rgba(8,9,11,.94);
      backdrop-filter:blur(16px);
      transform:translateY(-12px);
      opacity:0;
      pointer-events:none;
      transition:.18s ease;
    }
    .mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
    .mobile-menu a{
      display:flex;
      min-height:54px;
      align-items:center;
      padding:0 16px;
      border-bottom:1px solid rgba(255,255,255,.08);
      font-weight:950;
      text-transform:uppercase;
      font-size:.86rem;
    }
    .mobile-menu a:last-child{ border-bottom:1px solid rgba(255,255,255,.08); }
    .mobile-menu .soon{
      width:100%;
      justify-content:flex-start;
      border:0;
      border-top:1px solid rgba(255,255,255,.08);
      background:rgba(121,255,208,.09);
      color:var(--green);
      padding:0 16px;
    }

    main{ position:relative; z-index:1; }

    .hero{
      min-height:calc(100svh - 72px);
      display:grid;
      align-items:center;
      padding:42px 0 26px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0, 1.05fr) minmax(330px, .78fr);
      gap:34px;
      align-items:center;
    }
    .hero-grid > *,
    .studio > *,
    .video-grid > *,
    .credits-box > *{ min-width:0; }
    .eyebrow{
      display:flex;
      flex-wrap:wrap;
      gap:9px;
      margin-bottom:18px;
      color:var(--fog);
      font-size:.78rem;
      font-weight:950;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .eyebrow span{
      padding:8px 10px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.045);
    }
    h1{
      max-width:820px;
      font-size:clamp(3rem, 8vw, 7.4rem);
      line-height:.86;
      letter-spacing:0;
      text-transform:uppercase;
      font-weight:1000;
      overflow-wrap:anywhere;
    }
    .accent-pink{ color:var(--magenta); }
    .accent-green{ color:var(--green); }
    .accent-blue{ color:var(--cyan); }
    .hero-copy{
      max-width:680px;
      margin-top:24px;
      color:rgba(255,255,255,.78);
      font-size:clamp(1.02rem, 2vw, 1.2rem);
      line-height:1.68;
      font-weight:650;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:11px;
      margin-top:24px;
    }
    .ghost{
      background:rgba(255,255,255,.045);
      color:#fff;
      border-color:rgba(255,255,255,.17);
    }
    .ghost:hover{ background:rgba(255,255,255,.1); color:#fff; }

    .poster-stage{
      position:relative;
      min-height:420px;
      display:grid;
      place-items:center;
      perspective:1000px;
    }
    .poster{
      position:relative;
      width:min(100%, 540px);
      aspect-ratio:16 / 9;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.14);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16)),
        #11151a;
      box-shadow:0 34px 90px rgba(0,0,0,.58);
      transform-style:preserve-3d;
      transition:transform .18s ease;
    }
    .poster::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.05), transparent 24% 76%, rgba(255,255,255,.04)),
        repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 7px);
      pointer-events:none;
      mix-blend-mode:screen;
      z-index:2;
    }
    .poster-banner{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:saturate(.95) contrast(1.05);
    }
    .ticker{
      overflow:hidden;
      border-top:1px solid rgba(255,255,255,.11);
      border-bottom:1px solid rgba(255,255,255,.11);
      background:#f4f0eb;
      color:#111;
    }
    .ticker-track{
      display:flex;
      width:max-content;
      animation:ticker 28s linear infinite;
    }
    .ticker span{
      padding:15px 18px;
      font-weight:1000;
      text-transform:uppercase;
      letter-spacing:.04em;
      white-space:nowrap;
    }
    .ticker b:nth-child(1){ color:#c10089; }
    .ticker b:nth-child(2){ color:#008c68; }
    .ticker b:nth-child(3){ color:#0f6da5; }
    @keyframes ticker{ to{ transform:translateX(-50%); } }

    .band{ padding:78px 0; }
    .band.tight{ padding:52px 0; }
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:22px;
      margin-bottom:24px;
    }
    .kicker{
      color:var(--green);
      text-transform:uppercase;
      letter-spacing:.12em;
      font-size:.78rem;
      font-weight:1000;
      margin-bottom:8px;
    }
    h2{
      font-size:clamp(2.1rem, 5.5vw, 5rem);
      line-height:.92;
      letter-spacing:0;
      text-transform:uppercase;
      font-weight:1000;
      max-width:820px;
    }
    .sub{
      color:rgba(255,255,255,.72);
      line-height:1.7;
      font-size:1rem;
      max-width:440px;
      font-weight:620;
    }

    .poster-wall{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:16px;
    }
    .story-card{
      position:relative;
      min-height:340px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
      background:var(--panel);
      isolation:isolate;
      cursor:pointer;
      transform:translateY(22px);
      opacity:0;
      transition:opacity .5s ease, transform .5s ease, border-color .18s ease;
    }
    .story-card.revealed{ transform:translateY(0); opacity:1; }
    .story-card::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:var(--photo);
      background-size:cover;
      background-position:center;
      filter:grayscale(.18) contrast(1.08) brightness(.48);
      transform:scale(1.08);
      transition:transform .6s ease, filter .6s ease;
      z-index:-2;
    }
    .story-card::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.82));
      z-index:-1;
    }
    .story-card:hover{ border-color:rgba(255,255,255,.28); }
    .story-card:hover::before{ transform:scale(1.02); filter:grayscale(0) contrast(1.1) brightness(.68); }
    .story-card .num{
      position:absolute;
      top:16px;
      left:16px;
      color:rgba(255,255,255,.62);
      font-size:.8rem;
      font-weight:1000;
      letter-spacing:.08em;
    }
    .story-card .tag{
      position:absolute;
      top:16px;
      right:16px;
      padding:7px 9px;
      color:#08090b;
      background:var(--paper);
      font-size:.68rem;
      text-transform:uppercase;
      font-weight:1000;
      letter-spacing:.06em;
    }
    .story-card .body{
      position:absolute;
      left:18px;
      right:18px;
      bottom:18px;
    }
    .story-card h3{
      font-size:1.6rem;
      line-height:.95;
      text-transform:uppercase;
      letter-spacing:0;
      font-weight:1000;
    }
    .story-card p{
      margin-top:11px;
      color:rgba(255,255,255,.78);
      line-height:1.48;
      font-size:.92rem;
      font-weight:650;
    }

    .studio{
      display:grid;
      grid-template-columns:.85fr 1.15fr;
      gap:20px;
      align-items:stretch;
    }
    .control-panel,
    .live-poster,
    .video-box,
    .credits-box{
      border:1px solid rgba(255,255,255,.13);
      background:rgba(255,255,255,.045);
      backdrop-filter:blur(12px);
    }
    .control-panel{
      padding:20px;
      display:flex;
      flex-direction:column;
      gap:20px;
      min-height:450px;
    }
    .control-group h3{
      font-size:.85rem;
      text-transform:uppercase;
      letter-spacing:.1em;
      color:var(--dim);
      margin-bottom:10px;
    }
    .chips{ display:flex; flex-wrap:wrap; gap:9px; }
    .chip{
      padding:0 12px;
      color:rgba(255,255,255,.88);
      font-weight:950;
      font-size:.82rem;
      text-transform:uppercase;
    }
    .chip.active{
      color:#08090b;
      background:var(--green);
      border-color:transparent;
    }
    .range-row{
      display:grid;
      gap:8px;
      color:var(--fog);
      font-weight:850;
      font-size:.9rem;
    }
    input[type="range"]{ accent-color:var(--magenta); width:100%; }
    .live-poster{
      position:relative;
      min-height:450px;
      overflow:hidden;
      display:grid;
      align-content:end;
      padding:26px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.28)),
        #131417;
    }
    .live-poster::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:var(--live-img, url("/tropea_in_camera/assets/story/group-20.webp"));
      background-size:cover;
      background-position:center;
      opacity:.58;
      filter:contrast(1.1) saturate(.95);
      transition:.28s ease;
    }
    .live-poster::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.88)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 16px);
    }
    .live-poster > *{ position:relative; z-index:2; }
    .live-poster .meta{
      color:var(--green);
      font-size:.82rem;
      text-transform:uppercase;
      letter-spacing:.12em;
      font-weight:1000;
      margin-bottom:12px;
    }
    .live-poster h3{
      font-size:clamp(2.4rem, 5vw, 4.8rem);
      line-height:.86;
      letter-spacing:0;
      text-transform:uppercase;
      font-weight:1000;
      max-width:700px;
    }
    .live-poster p{
      margin-top:14px;
      max-width:580px;
      color:rgba(255,255,255,.78);
      line-height:1.6;
      font-weight:650;
    }

    .timeline-shell{
      border-top:1px solid rgba(255,255,255,.1);
      border-bottom:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.035);
      overflow:hidden;
    }
    .episode-row{
      display:flex;
      gap:12px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      padding:22px max(17px, calc((100vw - var(--max)) / 2));
      scrollbar-width:none;
    }
    .episode-row::-webkit-scrollbar{ display:none; }
    .episode-btn{
      flex:0 0 min(330px, 82vw);
      scroll-snap-align:center;
      min-height:160px;
      padding:18px;
      text-align:left;
      background:rgba(8,9,11,.8);
    }
    .episode-btn.active{ border-color:var(--magenta); box-shadow:inset 0 0 0 1px rgba(255,140,246,.24); }
    .episode-btn b{
      display:block;
      color:var(--magenta);
      font-size:.78rem;
      text-transform:uppercase;
      letter-spacing:.1em;
    }
    .episode-btn strong{
      display:block;
      margin-top:18px;
      font-size:1.35rem;
      line-height:1;
      text-transform:uppercase;
      font-weight:1000;
    }
    .episode-btn span{
      display:block;
      margin-top:10px;
      color:rgba(255,255,255,.7);
      line-height:1.45;
      font-weight:650;
    }
    .timeline-actions{
      display:flex;
      justify-content:center;
      gap:10px;
      padding:0 0 24px;
    }

    .video-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:22px;
      align-items:stretch;
    }
    .video-box{
      padding:12px;
      position:relative;
      overflow:hidden;
    }
    .video-box video{
      width:100%;
      aspect-ratio:16 / 9;
      object-fit:contain;
      background:#000;
      border:1px solid rgba(255,255,255,.12);
    }
    .video-aside{
      display:grid;
      gap:12px;
    }
    .mini-stat{
      border:1px solid rgba(255,255,255,.13);
      padding:18px;
      min-height:120px;
      background:rgba(255,255,255,.045);
    }
    .mini-stat strong{
      display:block;
      font-size:2.2rem;
      line-height:1;
      font-weight:1000;
      color:var(--cyan);
    }
    .mini-stat span{
      display:block;
      margin-top:9px;
      color:rgba(255,255,255,.72);
      line-height:1.45;
      font-weight:650;
    }

    .credits{
      padding:72px 0 38px;
      background:
        linear-gradient(180deg, transparent, rgba(255,255,255,.04)),
        #090a0c;
      border-top:1px solid rgba(255,255,255,.11);
    }
    .credits-grid{
      display:grid;
      grid-template-columns:1fr minmax(280px, 400px);
      gap:22px;
      align-items:start;
    }
    .credits-box{
      padding:28px;
      overflow:hidden;
      position:relative;
    }
    .credits-box::before{
      content:"CREDITS CREDITS CREDITS";
      position:absolute;
      left:-20px;
      bottom:-18px;
      color:rgba(255,255,255,.04);
      font-size:5.5rem;
      line-height:1;
      font-weight:1000;
      white-space:nowrap;
      pointer-events:none;
    }
    .credits-box > *{ position:relative; z-index:1; }
    .credits h2{ font-size:clamp(2.5rem, 6vw, 5.8rem); }
    .credit-list{
      margin-top:18px;
      display:grid;
      gap:14px;
    }
    .credit-person{
      padding:16px 0;
      border-top:1px solid rgba(255,255,255,.13);
    }
    .credit-person strong{
      display:block;
      color:#fff;
      font-size:clamp(1.14rem, 2.4vw, 1.48rem);
      line-height:1.1;
      font-weight:1000;
      text-transform:uppercase;
    }
    .credit-person span{
      display:block;
      margin-top:8px;
      color:var(--green);
      font-size:.82rem;
      line-height:1.35;
      font-weight:950;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .contact-box{
      border:1px solid rgba(255,255,255,.13);
      background:rgba(255,255,255,.045);
      backdrop-filter:blur(12px);
      padding:22px;
      overflow:hidden;
      position:relative;
    }
    .contact-box h3{
      font-size:1.1rem;
      text-transform:uppercase;
      font-weight:1000;
      margin-bottom:14px;
    }
    .contact-stack{
      display:grid;
      gap:9px;
    }
    .contact-stack a{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:52px;
      padding:0 14px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      font-weight:950;
      overflow-wrap:anywhere;
      text-align:center;
    }
    .contact-stack a:first-child{ background:#fff; color:#08090b; }

    footer{
      padding:24px 0;
      color:rgba(255,255,255,.5);
      font-weight:650;
      font-size:.92rem;
    }
    footer .wrap{
      display:flex;
      gap:12px;
      justify-content:space-between;
      flex-wrap:wrap;
    }

    @media (max-width:980px){
      nav{ display:none; }
      .icon-btn{ display:flex; }
      .hero{ min-height:auto; padding-top:36px; }
      .hero-grid,
      .studio,
      .video-grid,
      .credits-grid{ grid-template-columns:1fr; }
      .poster-stage{ min-height:360px; }
      .poster-wall{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .section-head{ display:block; }
      .section-head .sub{ margin-top:14px; }
      .contact-stack{ min-width:0; }
    }

    @media (max-width:620px){
      .wrap{ width:min(100% - 26px, var(--max)); }
      .top{ height:66px; }
      .brand span{ display:none; }
      h1{ font-size:clamp(2.35rem, 13vw, 3.45rem); line-height:.92; }
      h2{ font-size:clamp(2rem, 13vw, 4rem); }
      .poster-stage{ min-height:260px; }
      .poster{ width:min(100%, 360px); }
      .poster-wall{ grid-template-columns:1fr; }
      .story-card{ min-height:285px; }
      .band{ padding:58px 0; }
      .live-poster{ min-height:390px; padding:20px; }
      .hero-actions .cta{ width:100%; }
      .credits-box,
      .contact-box{ padding:20px; }
    }

    @media (prefers-reduced-motion:reduce){
      *,
      *::before,
      *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
      }
    }