/* ==========================================================================
   Si.Ca. Alimentari — la soglia (Entrata)

   La pagina che si apre per prima. Non è una home: è la scelta fra i due
   marchi di Riccia. Due mezze pagine affiancate; quella su cui passa il
   mouse si allarga e prende spazio all'altra. Il marchio galleggia sopra
   la fotografia, senza tondo bianco: sono i due file originali del cliente.

   Impianto, colori e movimento ripresi da design-src/Entrata.dc.html.
   Token, caratteri e pulsanti arrivano da style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Movimento — lento e continuo, mai a scatti
   -------------------------------------------------------------------------- */
@keyframes gate-zoom-a {
  0%, 100% { transform: scale(1.04); }
  50%      { transform: scale(1.16); }
}
@keyframes gate-zoom-b {
  0%, 100% { transform: scale(1.16); }
  50%      { transform: scale(1.03); }
}
@keyframes gate-respiro {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes gate-deriva {
  0%, 100% { transform: translate3d(-8%, -6%, 0) scale(1); }
  50%      { transform: translate3d(10%, 8%, 0) scale(1.18); }
}
@keyframes gate-galleggia {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.6deg); }
  50%      { transform: translate3d(0, -14px, 0) rotate(.6deg); }
}
@keyframes gate-luce {
  0%        { transform: translate3d(-150%, 0, 0) rotate(14deg); }
  55%, 100% { transform: translate3d(260%, 0, 0) rotate(14deg); }
}
@keyframes gate-pulsa {
  0%, 100% { opacity: .25; }
  50%      { opacity: .85; }
}

/* --------------------------------------------------------------------------
   2. Impianto
   -------------------------------------------------------------------------- */
.gate {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: #fff;
}

/* --- La riga di casa, sopra le due ante --- */
.gate__house {
  position: relative;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px var(--gut);
}
.gate__house-name {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(15px, 1.3vw, 19px);
  letter-spacing: -.01em;
  color: #fff;
}
.gate__house-meta {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #7C959E;
}

/* il passaggio diretto allo scaffale, per chi sa già cosa vuole */
.gate__shop {
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(245,208,112,.45);
  padding: 11px 18px;
  border-radius: 999px;
  transition: background-color .4s ease, color .4s ease,
              transform .4s cubic-bezier(.16,.78,.28,1);
}
.gate__shop:hover {
  background: var(--gold);
  color: var(--gold-ink);
  transform: translateY(-3px);
}

/* --- Le due ante --- */
.gate__doors {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  min-height: clamp(560px, 82svh, 900px);
}

/* --------------------------------------------------------------------------
   3. L'anta
   -------------------------------------------------------------------------- */
.gate__door {
  position: relative;
  flex: 1 1 380px;
  min-width: min(100%, 320px);
  min-height: clamp(340px, 44svh, 900px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  transition: flex-grow 1s cubic-bezier(.16,.78,.28,1);
}
.gate__door:hover { color: #fff; }

.gate__media {
  position: absolute;
  inset: -6%;
}
.gate__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 1.2s ease;
}
.gate__door--fish .gate__media img {
  object-position: 60% 55%;
  filter: saturate(.8) contrast(1.06);
  animation: gate-zoom-a 40s ease-in-out infinite;
}
.gate__door--deli .gate__media img {
  object-position: 72% 50%;
  filter: saturate(1.04) contrast(1.04);
  animation: gate-zoom-b 44s ease-in-out infinite;
}

/* il velo che tiene leggibile il piede e porta il colore del marchio */
.gate__veil { position: absolute; inset: 0; }
.gate__door--fish .gate__veil {
  background: linear-gradient(180deg,
              rgba(5,11,13,.82) 0%,
              rgba(5,11,13,.4) 34%,
              rgba(11,30,36,.78) 72%,
              #050B0D 100%);
}
.gate__door--deli .gate__veil {
  background: linear-gradient(180deg,
              rgba(26,15,12,.8) 0%,
              rgba(26,15,12,.3) 32%,
              rgba(26,15,12,.82) 72%,
              #140B08 100%);
}

/* la luce: il sole del pesce respira in alto a destra, il rosso degli
   alimentari deriva lento da sinistra */
.gate__glow { position: absolute; pointer-events: none; }
.gate__door--fish .gate__glow {
  right: 8%;
  top: 8%;
  width: min(46vw, 420px);
  height: min(46vw, 420px);
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255,243,206,.34) 0%,
              rgba(245,208,112,.16) 44%,
              rgba(245,208,112,0) 70%);
  animation: gate-respiro 11s ease-in-out infinite;
}
.gate__door--deli .gate__glow {
  left: -10%;
  top: 10%;
  width: 70%;
  height: 80%;
  background: radial-gradient(ellipse at 50% 50%,
              rgba(179,40,46,.26), rgba(179,40,46,0) 62%);
  animation: gate-deriva 28s ease-in-out infinite;
}

/* --- Le onde, solo sull'anta del pesce --- */
.gate__waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  opacity: .5;
  pointer-events: none;
}
.gate__wave-track {
  width: 200%;
  height: 100%;
  display: flex;
  animation: onda 30s linear infinite;
  will-change: transform;
}
.gate__wave-track svg { flex: 0 0 50%; height: 100%; }

/* --- Il piede dell'anta --- */
.gate__body {
  position: relative;
  z-index: 4;
  padding: clamp(28px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.8vw, 22px);
}

/* --- Lo stemma: il file originale del cliente, senza tondo bianco --- */
.gate__seal {
  position: relative;
  width: min(52%, 220px);
  animation: gate-galleggia 9s ease-in-out infinite;
}
.gate__door--deli .gate__seal { animation-duration: 10.5s; }
.gate__seal img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 44px rgba(0,0,0,.7));
}

/* la luce che attraversa lo stemma, ritagliata sul disegno del logo */
.gate__shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: url(../assets/logo-sica.png);
          mask-image: url(../assets/logo-sica.png);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  pointer-events: none;
}
.gate__shine span {
  position: absolute;
  top: -30%;
  left: 0;
  width: 30%;
  height: 160%;
  background: linear-gradient(90deg,
              rgba(255,245,215,0) 0%,
              rgba(255,250,232,.9) 50%,
              rgba(255,245,215,0) 100%);
  animation: gate-luce 7.5s ease-in-out infinite;
}

.gate__eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.gate__door--fish .gate__eyebrow { color: var(--gold); }
.gate__door--deli .gate__eyebrow { color: var(--rose); }

.gate__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 64px);
  line-height: .94;
  letter-spacing: -.04em;
  text-shadow: 0 6px 34px rgba(0,0,0,.8);
  max-width: 12ch;
}
.gate__lead {
  font-size: 16px;
  line-height: 1.55;
  max-width: 32ch;
}
.gate__door--fish .gate__lead { color: #BCD3DB; }
.gate__door--deli .gate__lead { color: #DCC4C2; }

/* l'invito: il filo si allunga, il testo non si muove */
.gate__enter {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.gate__door--fish .gate__enter { color: var(--gold); }
.gate__door--deli .gate__enter { color: var(--rose); }
.gate__enter-rule {
  display: block;
  width: 46px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.16,.78,.28,1);
}

/* --- Passaggio del mouse: l'anta prende spazio all'altra --- */
@media (hover: hover) {
  .gate__door:hover { flex-grow: 1.35; }
  .gate__door--fish:hover .gate__media img { filter: saturate(.95) contrast(1.06) brightness(1.12); }
  .gate__door--deli:hover .gate__media img { filter: saturate(1.14) contrast(1.04) brightness(1.1); }
  .gate__door:hover .gate__enter-rule { transform: scaleX(1.7); }
}

/* --------------------------------------------------------------------------
   4. Il piede della soglia
   -------------------------------------------------------------------------- */
.gate__foot {
  position: relative;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px var(--gut);
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #7C959E;
}
.gate__foot-hint { display: flex; align-items: center; gap: 10px; }
.gate__foot-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: gate-pulsa 4s ease-in-out infinite;
}
.gate__foot-claim { letter-spacing: .2em; color: #5B747C; }

/* --------------------------------------------------------------------------
   5. Adattamenti
   -------------------------------------------------------------------------- */

/* ----- 5.1 · Telefono: una colonna, tutte e due le ante visibili --------- */
@media (max-width: 760px) {
  .gate { min-height: 0; }
  .gate__doors { min-height: 0; }
  .gate__door { min-height: clamp(430px, 66svh, 620px); }
  .gate__seal { width: min(58%, 190px); }
  .gate__house { gap: 12px; }
}

@media (max-width: 420px) {
  .gate__body { padding: 24px 22px 30px; }
  .gate__door { min-height: 430px; }
  .gate__lead { font-size: 15px; }
}

/* ----- La riga di casa, dopo che ne è uscita la ragione sociale ---------
   Il nome del negozio è stato tolto dalla soglia. Era lui, coi suoi 260 px,
   a mandare «Vai allo shop» a capo sui telefoni: senza, il pulsante
   risaliva in alto a destra e tutta la pagina si alzava di 48 px.

   Qui il contenitore rimasto vuoto riprende l'ingombro che il testo aveva —
   tutta la riga, alta 36 px — e il pulsante torna dov'era, in basso a
   sinistra. La soglia dei 450 px non è scelta a caso: è la larghezza esatta
   sotto la quale il testo faceva andare a capo. Da 451 px in su non cambia
   niente, perché anche prima il pulsante stava in linea. */
@media (max-width: 450px) {
  .gate__house-id { flex-basis: 100%; height: 36px; }
}

/* ----- 5.2 · Puntatori senza hover: comandi da 44 px -------------------- */
@media (hover: none) {
  .gate__shop { padding: 14px 18px; }
  .gate__enter { padding: 12px 0; }
}

/* ----- 5.3 · Chi ha chiesto meno movimento ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .gate__media img,
  .gate__glow,
  .gate__seal,
  .gate__shine span,
  .gate__wave-track,
  .gate__foot-dot { animation: none; }
  .gate__media img { transform: scale(1.04); }
  .gate__glow { opacity: .55; }
}