/* ===========================
   FRANZO.NET - STYLE.CSS
   (single, clean, final)
   =========================== */

:root{
  --bg1:#050411;
  --bg2:#07061a;

  --violet:#7c3aed;
  --violet2:#a855f7;
  --cyan:#22d3ee;

  --text:#f3f4f6;
  --muted: rgba(243,244,246,.75);

  --panelA: rgba(12, 8, 28, .86);
  --panelB: rgba(10, 7, 22, .72);
  --stroke: rgba(255,255,255,.14);

  --shadow: 0 22px 70px rgba(0,0,0,.65);
  --radius: 22px;

  --btnBg: rgba(0,0,0,.25);
  --btnBgHover: rgba(0,0,0,.32);
  --btnStroke: rgba(255,255,255,.14);
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: linear-gradient(180deg,var(--bg1),var(--bg2));
  overflow-x:hidden;
}

/* Background animated */
.bg{ position:fixed; inset:-10%; z-index:0; pointer-events:none; overflow:hidden; }
.bg-layer{ position:absolute; inset:0; will-change:transform; }

#bg-nebula{
  background:
    radial-gradient(900px 600px at 20% 25%, rgba(124,58,237,.55), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, rgba(34,211,238,.35), transparent 58%),
    radial-gradient(1000px 760px at 65% 85%, rgba(168,85,247,.30), transparent 60%);
  filter: blur(24px);
  animation: drift 18s ease-in-out infinite alternate;
}
#bg-aurora{
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(168,85,247,.22) 20%,
      rgba(34,211,238,.18) 40%,
      rgba(124,58,237,.20) 60%,
      transparent 80%);
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: aurora 14s ease-in-out infinite;
}

@keyframes drift{
  from{ transform:translate(-2%,-1%) scale(1.03) }
  to{ transform:translate(2%,1%) scale(1.07) }
}
@keyframes aurora{
  0%{ transform:translate(-2%,-2%) rotate(-10deg) }
  50%{ transform:translate(2%,1%) rotate(-6deg) }
  100%{ transform:translate(-1%,2%) rotate(-10deg) }
}

/* Layout */
.wrap{
  position:relative;
  z-index:1;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding: clamp(150px, 18vh, 210px) 18px 140px;
}
@supports (height: 100dvh){
  .wrap{ min-height:100dvh; }
}

.stack{
  width:min(820px, 100%);
  position:relative;
}

/* Penland hero */
.hero-glow{
  position:absolute;
  left:50%;
  top:0;
  transform: translate(-50%, -50%);
  width:240px;
  height:240px;
  border-radius:999px;
  background:
    radial-gradient(circle at 35% 35%, rgba(168,85,247,.35), transparent 60%),
    radial-gradient(circle at 65% 65%, rgba(34,211,238,.22), transparent 60%);
  filter: blur(14px);
  animation: glowPulse 6s ease-in-out infinite;
  z-index:9;
}

.hero-link{
  position:absolute;
  left:50%;
  top:0;
  transform: translate(-50%, -50%);
  z-index:10;
  display:inline-block;
  border-radius:999px;
  outline:none;
}

.hero-penland{
  width:200px;
  display:block;
  filter:
    drop-shadow(0 16px 40px rgba(0,0,0,.55))
    drop-shadow(0 0 14px rgba(168,85,247,.35))
    drop-shadow(0 0 18px rgba(34,211,238,.22));
  animation: floaty 7s ease-in-out infinite;
}

.hero-link:focus-visible{
  box-shadow: 0 0 0 4px rgba(34,211,238,.35);
}

@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}
@keyframes glowPulse{
  0%,100%{ opacity:.8; transform: translate(-50%, -50%) scale(1); }
  50%{ opacity:1; transform: translate(-50%, -50%) scale(1.05); }
}

/* Card */
.card{
  background:linear-gradient(180deg,var(--panelA),var(--panelB));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter: blur(14px);
  overflow:hidden;
}
.inner{
  padding:140px 26px 26px;
  text-align:center;
}

/* Head text */
.live-title{
  font-size:22px;
  font-weight:800;
  margin:0 0 6px;
}
.live-days{
  font-size:18px;
  font-weight:600;
  margin:0 0 4px;
}
.live-time{
  font-size:18px;
  color:var(--muted);
  margin:0 0 18px;
}

/* Live box (only LIVE ORA + CTA) */
.livebox{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 0 auto 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.16);
}
.liveLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.liveDot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#ff2d2d;
  animation: livePulse 1.2s ease-in-out infinite;
  flex:0 0 auto;
}
@keyframes livePulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,45,45,.45); }
  70%  { box-shadow: 0 0 0 12px rgba(255,45,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,45,45,0); }
}
.liveTop{
  font-weight:800;
  letter-spacing:.3px;
  font-size:13px;
  color:#fff;
  white-space:nowrap;
}
.liveCta{
  flex:0 0 auto;
  text-decoration:none;
  font-weight:800;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,45,45,.14);
  color:#fff;
  transition: .15s ease;
}
.liveCta:hover{
  transform: translateY(-2px);
  background: rgba(255,45,45,.20);
  border-color: rgba(255,255,255,.22);
}

/* Buttons */
.links{
  display:grid;
  gap:12px;
  margin-bottom:16px;
}

.btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  background:var(--btnBg);
  border:1px solid var(--btnStroke);
  text-decoration:none;
  color:var(--text);
  transition:.15s ease;
}
.btn:hover{
  transform:translateY(-2px);
  background:var(--btnBgHover);
}

.left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

/* Icons (svg as <img>) */
.icon img{
  width:22px;
  height:22px;
  display:block;
  /* purple-ish */
  filter: brightness(0) saturate(100%)
          invert(38%) sepia(64%) saturate(1223%)
          hue-rotate(230deg) brightness(92%) contrast(92%);
}
.btn:hover .icon img{
  /* cyan-ish */
  filter: brightness(0) saturate(100%)
          invert(67%) sepia(63%) saturate(473%)
          hue-rotate(140deg) brightness(96%) contrast(92%);
}

/* Divider */
.divider{
  height:1px;
  width:100%;
  margin: 16px 0 12px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

/* CTA row: Supportami + Contattami */
.cta-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

/* Small buttons (used in CTA row and elsewhere) */
.btn-small{
  padding:11px 14px;
  border-radius:14px;
  font-size:14px;
  opacity:.95;
}
.btn-small:hover{ opacity:1; }

/* Support glow (visible and safe) */
/* Twitch main CTA: un filo più presente di btn-support */
.btn-twitch-main::after{
  opacity:.95;              /* più visibile */
  animation-duration: 2.1s; /* un po' più “vivo” */
}
.btn-support{
  position:relative;
  overflow:visible; /* important: don't clip glow */
}
.btn-support::after{
  content:"";
  position:absolute;
  inset:-8px;               /* outside glow */
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;               /* behind the button */
  background:
    radial-gradient(circle at 30% 35%, rgba(168,85,247,.28), transparent 62%),
    radial-gradient(circle at 70% 65%, rgba(34,211,238,.18), transparent 62%);
  filter: blur(10px);
  opacity:.75;
  animation: supportPulse 2.6s ease-in-out infinite;
}
@keyframes supportPulse{
  0%,100%{ transform: scale(.98); opacity:.45; }
  50%     { transform: scale(1.04); opacity:.95; }
}

/* Footer */
.footer{
  margin-top:14px;
  font-size:12px;
  color: rgba(243,244,246,.55);
}

/* Form pages */
.small-note{
  font-size:14px;
  color: var(--muted);
  margin: 0 0 16px;
}

.form{
  display:grid;
  gap:10px;
  text-align:left;
}

.row2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

label{
  font-size:12px;
  color: rgba(243,244,246,.72);
  margin: 4px 0 2px;
  display:block;
}

input, textarea{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  color:var(--text);
  font: inherit;
  outline:none;
}

input:focus, textarea:focus{
  border-color: rgba(34,211,238,.35);
  box-shadow: 0 0 0 4px rgba(34,211,238,.12);
}

textarea{
  min-height:150px;
  resize:vertical;
}

.send{
  margin-top:6px;
  padding:12px 16px;
  border-radius:16px;
  border:none;
  background:linear-gradient(90deg,rgba(124,58,237,.32),rgba(34,211,238,.24));
  font-weight:800;
  cursor:pointer;
  transition:.15s ease;
  color:var(--text);
}
.send:hover{ transform:translateY(-2px); }

.back{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: rgba(243,244,246,.85);
  font-weight:700;
  opacity:.9;
}
.back:hover{ opacity:1; }