/* ARISE Coffee — hero: video placeholder, logo mark, eyebrow */

/* ---------- HERO ---------- */
.hero{
  position:relative;
  height:100svh;
  min-height: 600px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 0 24px;
}

.video-placeholder{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 20%, rgba(199,214,222,0.10), transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-black) 78%);
  overflow:hidden;
}
.grain{
  position:absolute; inset:-20%;
  opacity:0.05;
  background-image: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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}
@keyframes grainShift{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-2%,1%); } }

.steam{ position:absolute; bottom:0; left:50%; width:1px; height:1px; }
.steam span{
  position:absolute; bottom:0;
  width:120px; height:120px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(249,250,245,0.05), transparent 70%);
  filter: blur(6px);
  animation: rise 9s ease-in infinite;
}
.steam span:nth-child(1){ left:-220px; animation-delay:0s; }
.steam span:nth-child(2){ left:-40px;  animation-delay:3s; }
.steam span:nth-child(3){ left:160px;  animation-delay:6s; }
@keyframes rise{
  0%{ transform:translateY(0) scale(0.6); opacity:0; }
  15%{ opacity:1; }
  100%{ transform:translateY(-70vh) scale(1.6); opacity:0; }
}

.hero-content{ position:relative; z-index:2; }

.eyebrow{
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: clamp(26px, 4.5vh, 44px);
  opacity:0;
  animation: fadeUp .4s ease 0s forwards;
}

/* --- true logo mark: real traced vector, revealed with a rising horizon wipe --- */
.mark-frame{
  position:relative;
  width: clamp(150px, 15vw, 210px);
  margin: 0 auto;
  overflow: visible;
}
.mark-reveal{
  clip-path: inset(100% 0 0 0);
  animation: markRise 0.55s cubic-bezier(.65,0,.2,1) .05s forwards;
}
.mark-reveal svg{ display:block; width:100%; height:auto; }
@keyframes markRise{ to{ clip-path: inset(0 0 0 0); } }

.horizon{
  position:absolute;
  left:-14%; right:-14%;
  bottom: 100%;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--frost) 25%, var(--ivory) 50%, var(--frost) 75%, transparent);
  box-shadow: 0 0 12px 1px rgba(199,214,222,0.6);
  animation: horizonRise .55s cubic-bezier(.65,0,.2,1) .05s forwards;
}
@keyframes horizonRise{
  0%{ bottom: 100%; opacity: 1; }
  92%{ opacity: 1; }
  100%{ bottom: -2%; opacity: 0; }
}

.subline{
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: clamp(22px, 3.6vh, 34px);
  opacity:0;
  animation: fadeUp .4s ease .5s forwards;
}

.philosophy{
  font-family: var(--display);
  font-style: italic;
  font-weight: 450;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--frost);
  margin-top: clamp(30px, 5vh, 48px);
  opacity:0;
  animation: fadeUp .4s ease .5s forwards;
}
.philosophy::before,
.philosophy::after{ content:'—'; margin:0 12px; color:var(--steel); }

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

.scroll-cue{
  position:absolute;
  bottom: clamp(24px, 4vh, 40px);
  /* Центруем растяжкой на всю ширину, а не через translateX(-50%): fadeUp в
     последнем кадре задаёт свой transform, а значения анимации перебивают
     обычные объявления — сдвиг на -50% пропадал, и подсказка уезжала вправо
     на половину своей ширины. */
  left:0; right:0;
  display:flex; flex-direction:column; align-items:center;
  gap:8px;
  opacity:0;
  animation: fadeUp .35s ease .85s forwards;
}
.scroll-cue .line{
  width:1px; height:36px;
  background: linear-gradient(var(--steel), transparent);
  position:relative;
  overflow:hidden;
}
.scroll-cue .line::after{
  content:'';
  position:absolute;
  top:-100%; left:0;
  width:100%; height:100%;
  background: var(--ivory);
  animation: trickle 2.2s ease-in-out infinite;
}
@keyframes trickle{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
.scroll-cue span{
  font-family: var(--mono);
  font-size:0.6rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color: var(--steel);
}