:root{
  --text: rgba(255,255,255,0.96);
  --text-muted: rgba(255,255,255,0.82);
  --shadow: rgba(0,0,0,0.45);
  --overlay-1: rgba(0,0,0,0.55);
  --overlay-2: rgba(0,0,0,0.25);
  --maxw: 980px;
}

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

body{
  margin: 0;
  font-family: "Questrial", sans-serif;
  background: #111;
  color: var(--text);
}

.hero{
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  padding: clamp(18px, 3vw, 34px);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(1200px 600px at 50% 35%, rgb(0 0 0 / 10%), transparent 5%),
    linear-gradient(180deg, rgb(255 255 255 / 0%), rgb(0 0 0 / 40%)),
    url(../file/toem.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  filter: blur(0px) saturate(1.06);
  opacity: 0;
}

body.loaded .hero__bg {
  animation: bgIn 2000ms ease-out 200ms forwards;
}

.hero::after{
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .55;
  transform: translateZ(0);
}

.hero__top,
.hero__content,
.hero__bottom{
  position: relative;
  z-index: 2;
}

.hero__top{
  display: flex;
  justify-content: center;
  padding-top: clamp(6px, 1vw, 10px);
}

.hero__logo{
  height: clamp(66px, 8vw, 78px);
  width: auto;
  filter: drop-shadow(0 12px 26px var(--shadow));
  opacity: 1;
}

body.loaded .hero__logo {
  animation: logoMoveUp 1100ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms both;
}

.hero__content{
  width: min(var(--maxw), 100%);
  margin: -26px auto 0 auto;
  text-align: center;
}

.hero__title{
  margin: 0;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4.2vw, 3.6rem);
  line-height: 1.05;
  text-shadow: 0 18px 42px var(--shadow);
  opacity: 0;
  transform: translateY(16px) scale(1.03);
  filter: blur(16px);
  letter-spacing: 0.42em;
  will-change: transform, opacity, filter, letter-spacing;
}

body.loaded .hero__title {
  animation: trackingReveal 1050ms cubic-bezier(.2,.8,.2,1) 1000ms forwards;
}

.hero__subtitle{
  margin: clamp(12px, 2.2vw, 18px) 0 0;
  font-size: clamp(1.25rem, 2.1vw, 2.35rem);
  line-height: 1.5;
  color: var(--text-muted);
  text-shadow: 0 12px 28px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(14px);
  filter: blur(12px);
  will-change: transform, opacity, filter;
}

body.loaded .hero__subtitle {
  animation: fadeLift 950ms cubic-bezier(.2,.8,.2,1) 1200ms forwards;
}

.hero__bottom{
  display: flex;
  justify-content: center;
  padding-bottom: clamp(10px, 1.4vw, 16px);
}

.hero__address{
  margin: 0;
  text-align: center;
  font-size: 1.2rem;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 10px 24px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(10px);
  filter: blur(10px);
  will-change: transform, opacity, filter;
}

body.loaded .hero__address {
  animation: fadeLift 950ms cubic-bezier(.2,.8,.2,1) 1400ms forwards;
}

/* ── Keyframes ── */
@keyframes bgIn{
  0%  { opacity: 0; transform: scale(1); filter: blur(0px) saturate(1.06); }
  100%{ opacity: 1; transform: scale(1); filter: blur(0px) saturate(1.06); }
}

@keyframes logoMoveUp{
  0%  { transform: translateY(280px) scale(1); }
  100%{ transform: translateY(0px)   scale(1); }
}

@keyframes trackingReveal{
  0%  { opacity: 0; transform: translateY(16px) scale(1.03); filter: blur(16px); letter-spacing: 0.42em; }
  70% { opacity: 1; }
  100%{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); letter-spacing: 0.15em; }
}

@keyframes fadeLift{
  0%  { opacity: 0; transform: translateY(14px); filter: blur(14px); }
  70% { opacity: 1; }
  100%{ opacity: 1; transform: translateY(0); filter: blur(0px); }
}

/* ── Logo nero sotto 800px ── */
@media (max-width: 799px){
  .hero__logo{
    content: url(../file/toem_nero.png);
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce){
  .hero__bg,
  .hero__logo,
  .hero__title,
  .hero__subtitle,
  .hero__address{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    letter-spacing: inherit !important;
  }
}