/* ==========================================================================
   Dare Production — child theme YOOtheme Pro
   Caricato automaticamente da YOOtheme Pro quando il child theme è attivo.
   Contiene: loader di pagina + striscia orizzontale 4:3.
   Tutte le classi hanno prefisso .dare- per non collidere con UIkit.
   ========================================================================== */

:root{
  --dare-paper:#FBFAEF;
  --dare-ink:#0F0F0E;
  --dare-ink-55:rgba(15,15,14,.55);
  --dare-ink-25:rgba(15,15,14,.25);
  --dare-veil:rgba(228,227,217,.82);
  --dare-panel:#DCDBD1;
  --dare-tile-h:min(300px,27vh);
  --dare-grotesk:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --dare-mono:ui-monospace,Menlo,Consolas,monospace;
}

/* --------------------------------------------------------------- loader -- */

.dare-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--dare-paper);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease, visibility 0s .45s;
}
.dare-loader.is-on{
  opacity:1;
  visibility:visible;
  transition:opacity .18s ease;
}
.dare-loader__logo{
  width:88px;
  height:94px;
  background:url(../images/logo.png) center/contain no-repeat;
}
.dare-loader.is-on .dare-loader__logo{
  animation:dare-gait .9s cubic-bezier(.55,0,.2,1) infinite;
}
@keyframes dare-gait{
  0%   {transform:translateX(-6px) scale(.98); opacity:.35}
  45%  {transform:translateX(0)    scale(1);   opacity:1}
  100% {transform:translateX(6px)  scale(.98); opacity:.35}
}
.dare-loader__bar{
  position:absolute;
  left:50%;
  bottom:38px;
  width:120px;
  height:1px;
  background:var(--dare-ink-25);
  transform:translateX(-50%);
}
.dare-loader__bar i{
  display:block;
  height:100%;
  width:0;
  background:var(--dare-ink);
}
.dare-loader.is-on .dare-loader__bar i{
  animation:dare-fill .95s cubic-bezier(.4,0,.1,1) forwards;
}
@keyframes dare-fill{ from{width:0} to{width:100%} }

/* -------------------------------------------------------------- striscia -- */

.dare-strip{
  position:relative;
  height:calc(var(--dare-tile-h) * 1.85);
  overflow:hidden;
  cursor:grab;
  /* la striscia esce a tutta larghezza anche dentro un contenitore YOOtheme */
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
}
.dare-strip.is-drag{ cursor:grabbing }

.dare-strip__track{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  display:flex;
  align-items:center;
  will-change:transform;
}

.dare-tile{
  position:relative;
  flex:0 0 auto;
  height:var(--dare-tile-h);
  aspect-ratio:4/3;
  margin:0;
  transform-origin:center center;
  transition:transform .5s cubic-bezier(.16,.84,.28,1);
}
.dare-tile img,
.dare-tile video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.dare-tile.is-open{
  transform:scale(1.72);
  z-index:6;
}

.dare-tile__card{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  padding:14px 16px;
  background:var(--dare-veil);
  color:var(--dare-ink);
  opacity:0;
  transition:opacity .3s ease;
}
.dare-tile.is-open .dare-tile__card{
  opacity:1;
  transition-delay:.12s;
}
.dare-tile__title{
  font-weight:700;
  font-size:11px;
  letter-spacing:-.01em;
  line-height:1.2;
}
.dare-tile__meta{
  margin-top:12px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1px 10px;
  font-size:6.5px;
  line-height:1.5;
}
.dare-tile__meta b{
  font-weight:400;
  color:var(--dare-ink-55);
}
.dare-tile__desc{
  margin-top:auto;
  max-width:34ch;
  font-size:6.5px;
  line-height:1.55;
}

/* --------------------------------------------------------------- mobile -- */

@media (max-width:640px){
  :root{ --dare-tile-h:min(220px,32vh) }
  .dare-tile.is-open{ transform:scale(1.35) }
}

@media (prefers-reduced-motion:reduce){
  .dare-loader__logo,
  .dare-loader__bar i{ animation:none }
  .dare-tile{ transition:none }
}

/* ---------------------------------------------------------------- ghiera -- */

.dare-dial{
  position:relative;
  display:grid;
  grid-template-columns:40% 60%;
  overflow:hidden;
  /* a tutta larghezza anche dentro un contenitore YOOtheme */
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
}

.dare-dial__visual{
  position:relative;
  background:#0B0B0A;
  overflow:hidden;
}
.dare-dial__visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s ease;
}
.dare-dial__visual img.is-live{ opacity:1 }

.dare-dial__panel{
  position:relative;
  background:var(--dare-panel);
  overflow:hidden;
  touch-action:none;
}

/* la ruota: centro fuori schermo a destra, raggio 520px */
.dare-dial__stage{
  position:absolute;
  top:50%;
  right:-560px;
  width:1120px;
  height:1120px;
  transform:translateY(-50%);
  pointer-events:none;
}
.dare-dial__arc{
  position:absolute;
  top:50%;
  left:50%;
  width:1040px;
  height:1040px;
  margin:-520px 0 0 -520px;
  border:1px solid rgba(15,15,14,.10);
  border-radius:50%;
}
.dare-dial__ring{
  position:absolute;
  inset:0;
}
.dare-dial__item{
  position:absolute;
  top:50%;
  left:50%;
  width:520px;
  height:52px;
  margin:-26px 0 0 -520px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:22px;
  transform-origin:100% 50%;
  will-change:transform,opacity;
  pointer-events:auto;
  cursor:pointer;
}
.dare-dial__num{
  font-family:var(--dare-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--dare-ink-55);
}
.dare-dial__name{
  font-weight:700;
  font-size:26px;
  letter-spacing:-.02em;
  white-space:nowrap;
  transition:font-size .35s ease;
}
.dare-dial__item.is-active .dare-dial__name{ font-size:38px }
.dare-dial__item.is-active .dare-dial__num{ color:var(--dare-ink) }

.dare-dial__notch{
  position:absolute;
  top:50%;
  right:520px;
  width:26px;
  height:1px;
  background:var(--dare-ink);
  transform:translateY(-50%);
}

.dare-dial__sublist{
  position:absolute;
  top:50%;
  left:60px;
  transform:translateY(-50%);
  width:min(260px,28%);
  z-index:2;
}
.dare-dial__sublist ul{
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.dare-dial__sublist li{
  list-style:none;
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:12px;
  align-items:baseline;
  font-family:var(--dare-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size:11px;
  color:var(--dare-ink-55);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
}
.dare-dial__sublist.is-live li{ opacity:1; transform:none }
.dare-dial__sublist.is-live li:nth-child(2){ transition-delay:.06s }
.dare-dial__sublist.is-live li:nth-child(3){ transition-delay:.12s }
.dare-dial__sublist.is-live li:nth-child(4){ transition-delay:.18s }
.dare-dial__sublist li span:nth-child(2){
  font-family:var(--dare-grotesk, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-weight:700;
  font-size:13px;
  letter-spacing:-.01em;
  color:var(--dare-ink);
}

/* il contenitore prima che il JS lo trasformi: niente lampi di contenuto */
.dare-dial-source:not(.dare-dial){ display:none }

@media (max-width:900px){
  .dare-dial{ grid-template-columns:1fr }
  .dare-dial__visual{ display:none }
  .dare-dial__stage{ right:-680px }
  .dare-dial__sublist{ left:30px; width:min(220px,45%) }
}

@media (prefers-reduced-motion:reduce){
  .dare-dial__visual img,
  .dare-dial__name,
  .dare-dial__sublist li{ transition:none }
}

/* griglia decorativa del tema: rimossa */
html::after{ display:none !important }