/* RESET & BASE */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 4px;
  box-shadow: 0 0 10px var(--color-cyan);
}

/* @import fonts: Orbitron + Roboto */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Roboto:wght@300;400;700&display=swap');

:root {
  --font-display: 'Orbitron', sans-serif;
  --font-ui: 'Roboto', sans-serif;
  --color-white: #FFFFFF;
  --color-cyan: #00F5FF;
  --color-magenta: #FF00FF;

  /* Palette Feed importata */
  --rift-rust: #F57D1F;
  --rift-smog: #0F1926;
  --rift-beige: #D7BFA2;
}

body,
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
  font-family: var(--font-ui);
}

/* LAYOUT SFONDO STATICO */
.rift-layout-bg {
  position: absolute;
  inset: 0;
  background-color: #111;
  background-image: url('img/img-city-agenzia-digital-social-media-the-rift-studio-comunicazione.webp');
  background-size: cover;
  background-position: center;
  z-index: 1;
  filter: blur(8px);
  transform: scale(1.1);
}

/* OVERLAY SCURO */
.rift-layout-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

/* CONTAINER INTRO */
.rift-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  /* Clickable for skip */
}

/* SKIP HINT STYLE */
.rift-intro-skip-hint {
  position: absolute;
  bottom: 30px;
  right: 30px;
  font-family: var(--font-ui);
  font-size: 12px;
  /* o var(--rift-text) se definita, qui uso white */
  color: #B0B0B0;
  opacity: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  pointer-events: none;
  z-index: 20;
  /* Sopra al video z:5 e centro z:10 (se hidden) */
  transition: color 0.3s, opacity 0.5s ease;
}

@media (max-width: 1100px) {
  .rift-intro-skip-hint {
    bottom: 90px;
    /* Raised to avoid overlap on mobile */
  }
}

.rift-intro-skip-hint.is-hidden {
  opacity: 0;
}

.rift-intro-overlay:hover .rift-intro-skip-hint {
  color: var(--color-white);
}

/* VIDEO FULLSCREEN */
.rift-intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9) contrast(1.1);
  z-index: 5;
}

/* CENTRO (LOGO + MENU) */
.rift-intro-center {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Initial State: Hidden completely */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* FADE-IN PIÙ MORBIDO (1.6s) */
  transition: opacity 1.6s ease-out, visibility 0s linear 0s;
}

/* When active (added by JS) */
.rift-intro-center.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* WRAPPER PER SCALA LOGO (+25%) */
.rift-logo-wrapper {
  transform: scale(1.25) translateY(-10%);
  margin-bottom: -5rem;
  /* Spostato qui per mantenere il layout originale */
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1100px) {
  .rift-logo-wrapper {
    transform: scale(1.25) translateY(-20%);
  }
}

/* LOGO THE RIFT (IMMAGINE) */
/* Rimosso font props, aggiunto width/filter per immagine */
.rift-logo {
  font-family: inherit;
  font-size: inherit;
  width: 324px;
  max-width: 90%;
  height: auto;
  /* margin-bottom moved to wrapper */
  display: block;

  /* Gradiente intermittenza Ciano -> Magenta */
  animation: rift-shadow-pulse 2s infinite alternate;
}

@media (min-width: 1100px) {
  .rift-logo {
    width: 486px;
  }
}

/* ANIMAZIONE OMBRA PULSANTE (Gradient Left-Right) */
@keyframes rift-shadow-pulse {
  0% {
    filter:
      drop-shadow(-5px 0 5px rgba(255, 107, 0, 0.4)) drop-shadow(5px 0 5px rgba(0, 212, 255, 0.4));
  }

  100% {
    filter:
      drop-shadow(-5px 0 20px rgba(255, 140, 0, 0.9)) drop-shadow(5px 0 20px rgba(0, 212, 255, 0.9));
  }
}

/* ANIMAZIONI GLITCH (INTENSE HORIZONTAL) - Converted to filters for IMG */
@keyframes rift-glitch-once {
  0% {
    transform: translate(0);
    filter: drop-shadow(10px 0 0 #FF6B00) drop-shadow(-10px 0 0 #00D4FF);
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  10% {
    transform: translate(-50px, 5px) skewX(-50deg) scale(1.5, 0.4);
    filter: drop-shadow(-20px 0 0 #00FF41) drop-shadow(20px 0 0 #FF6B00);
    clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);
  }

  20% {
    transform: translate(50px, -5px) skewX(50deg) scale(0.4, 1.5);
    filter: drop-shadow(20px 0 0 #00FF41) drop-shadow(-20px 0 0 #FF8C00);
    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
  }

  30% {
    transform: translate(-30px, 10px) skewX(-30deg);
    opacity: 0.8;
  }

  40% {
    transform: translate(30px, -10px) skewX(30deg);
    opacity: 1;
  }

  50% {
    transform: translate(-15px, 0) scale(1.1);
  }

  60% {
    transform: translate(15px, 0) scale(0.9);
  }

  70% {
    transform: translate(-5px, 5px);
  }

  80% {
    transform: translate(5px, -5px);
  }

  90% {
    transform: translate(0) skewX(0);
    clip-path: none;
  }

  100% {
    transform: translate(0);
    clip-path: none;
    /* Stato finale: deve coincidere con l'inizio di rift-shadow-pulse o simile */
    filter:
      drop-shadow(-5px 0 5px rgba(255, 107, 0, 0.4)) drop-shadow(5px 0 5px rgba(0, 212, 255, 0.4));
  }
}

@keyframes rift-glitch-loop {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-20px, 0) skewX(-15deg);
  }

  40% {
    transform: translate(20px, 0) skewX(15deg);
  }

  60% {
    transform: translate(-8px, 0);
  }

  80% {
    transform: translate(8px, 0);
  }

  100% {
    transform: translate(0);
  }
}

.rift-logo.glitch-once {
  animation: rift-glitch-once 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.rift-logo.glitch-loop {
  animation: rift-glitch-loop 0.2s steps(2, end);
}

/* MENU WRAPPER */
.rift-menu-wrapper {
  margin-top: 3vh;
  /* Raised by 5% of viewport height (Global) */
  position: relative;
  display: inline-block;
  min-width: 320px;
  /* Reduced from 400px (-20%) */
}

/* MENU CONTAINER */
.rift-menu {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  /* Reduced from 0.75rem */
  align-items: stretch;
}

/* MENU ITEM */
.rift-menu-item {
  position: relative;

  /* Stile Box Hamburger Feed */
  background: var(--rift-smog);
  color: var(--color-white);

  font-family: var(--font-display);
  font-size: 1rem;
  /* Reduced from 1.2rem */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  width: 100%;

  padding: 0.4rem 0.8rem;
  /* Reduced from 0.5rem 1rem */

  /* Bordi e Taglio */
  border: 1px solid var(--rift-rust);
  border-left: 4px solid var(--rift-rust);
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);

  cursor: pointer;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);

  opacity: 0;
  transform: translateY(12px);

  /* Transizioni */
  transition:
    color 0.2s,
    transform 0.8s cubic-bezier(0.2, 0.8, 0.3, 1),
    opacity 0.9s ease-out,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.rift-menu-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Old Cyan Box Removed */
.rift-menu-item::before {
  display: none;
}

/* Desktop: hover/active */
/* Desktop: hover/active (Updated style) */
@media (hover: hover) {

  .rift-menu-item:hover,
  .rift-menu-item:focus-visible {
    background: var(--rift-rust);
    color: #050508;
    box-shadow: 0 0 15px var(--rift-rust);
  }

  .rift-menu-item:active {
    background: #F57D1F;
    color: var(--color-white);
  }
}

/* Mobile: gestione via classe .is-active */
/* Mobile: gestione via classe .is-active */
@media (hover: none) {
  /* Removed old ::before logic since ::before is display:none */

  .rift-menu-item.is-active {
    background: var(--rift-rust);
    color: #050508;
    box-shadow: 0 0 15px var(--rift-rust);
  }
}

/* START BUTTON SPECIALE */
.rift-menu-start {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  /* Ombra Giallo Caldo (richiesta identica al logo, ma non modificato come da richiesta logo) */
  /* Mantengo quello che c'era, visto che l'utente ha detto di modificare L'OMBRA DEL LOGO. */
  /* Ma in 356 avevo messo Giallo. */
  /* Il prompt dice "l'ombra sull'immagine del logo". "Non modificare altro". */
  /* Quindi NON cambio il pulsante Start a Cyan/Magenta ora. */
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 15px rgba(255, 200, 0, 0.5)) drop-shadow(0 0 30px rgba(255, 100, 0, 0.3));
}

.rift-menu-start.rift-menu-start-glitch {
  animation: rift-glitch-loop 0.3s steps(2, end);
  color: #F57D1F;
  text-shadow: 2px 0 var(--color-cyan);
}

/* =========================================
   CAROUSEL FEED STYLES
   ========================================= */

/* Reuse .reel class structure where possible, but override for scroll */
.carousel-container {
  position: relative;
  width: 100%;
  /* Keep aspect ratio similar to reels or let it adapt to image */
  background: #000;
  overflow: hidden;
  /* Border like Reels */
  border: 1px solid #333;
  margin-bottom: 2rem;
}

.carousel-container.cyberpunk-border {
  border-color: var(--rift-rust);
  box-shadow: 0 0 10px rgba(245, 125, 31, 0.2);
}

.carousel-scroller {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;
  scrollbar-width: none;
  /* Firefox */
}

.carousel-scroller::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.carousel-item {
  flex: 0 0 100%;
  /* Full width */
  width: 100%;
  height: auto;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fill the container space */
  max-height: 80vh;
  /* Prevent being too tall on desktop */
}

/* Dots / Counter */
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  /* Above caption if separate, or inside image area */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
  pointer-events: none;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition: background 0.3s;
}

.carousel-dot.active {
  background: var(--rift-rust);
  box-shadow: 0 0 5px var(--rift-rust);
}

/* Caption Adjustments for Carousel */
.carousel-caption-wrapper {
  /* Reuse .reel-caption logic but ensure it sits below execution */
  background: #000;
  padding: 1rem;
  border-top: 1px solid #1a1a1a;
}


/* DESKTOP ADJUSTMENT: Raise Links 10% */
@media (min-width: 1024px) {
  .rift-menu-wrapper {
    transform: translateY(-10vh);
  }
}


/* =========================================
   MOBILE LANDSCAPE RESPONSIVENESS
   ========================================= */
@media (max-height: 500px) and (orientation: landscape) {
  .rift-logo-wrapper {
    transform: scale(0.8) translateY(-10vh);
    /* Raised manually by approx 20% of viewport */
    margin-bottom: -1rem;
  }

  .rift-logo {
    width: 250px;
  }

  .rift-menu-wrapper {
    min-width: unset;
    width: 90%;
    margin-top: -10vh;
    /* Raise links too */
  }

  .rift-menu {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .rift-menu-item {
    width: calc(33.33% - 10px);
    font-size: 0.8rem;
    padding: 6px 10px;
    letter-spacing: 0.1em;
  }

  .rift-menu-start {
    width: calc(50% - 10px);
    font-size: 1.2rem;
  }

  .rift-intro-skip-hint {
    bottom: 5px;
    right: 15px;
    font-size: 10px;
  }
}