/* Noise grain */
.noise {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grain 9s steps(10) infinite;
}

@keyframes grain {
  0%   { transform: translate(0,0); }
  10%  { transform: translate(-5%,-8%); }
  20%  { transform: translate(-12%,6%); }
  30%  { transform: translate(8%,-22%); }
  40%  { transform: translate(-4%,20%); }
  50%  { transform: translate(-14%,8%); }
  60%  { transform: translate(14%,0); }
  70%  { transform: translate(0,14%); }
  80%  { transform: translate(4%,30%); }
  90%  { transform: translate(-8%,8%); }
}

/* Hero slot (word rotation container) */
.hero-slot {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1;
}

#rotatingWord { display: inline-block; }

#rotatingWord.slot-out {
  animation: slotOut 0.26s cubic-bezier(0.4,0,1,1) forwards;
}
#rotatingWord.slot-in {
  animation: slotIn 0.26s cubic-bezier(0,0,0.2,1) forwards;
}

@keyframes slotOut {
  to { transform: translateY(-105%); opacity: 0; }
}
@keyframes slotIn {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Hero entrance */
.hero-pre,
.hero-title,
.hero-sub  { opacity: 0; transform: translateY(16px); }
.hero-scroll { opacity: 0; }

body.hero-loaded .hero-pre   { animation: heroUp 0.6s 0.2s ease forwards; }
body.hero-loaded .hero-title { animation: heroUp 0.7s 0.4s ease forwards; }
body.hero-loaded .hero-sub   { animation: heroUp 0.6s 0.65s ease forwards; }
body.hero-loaded .hero-scroll{ animation: heroFadeIn 0.7s 0.9s ease forwards; }

@keyframes heroUp    { to { opacity: 1; transform: translateY(0); } }
@keyframes heroFadeIn{ to { opacity: 1; } }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Vertical text (scroll indicator) */
.text-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Works hover overlay */
.works-img-wrap { overflow: hidden; }
.works-img-wrap img {
  transition: transform 0.7s ease, filter 0.5s ease;
  filter: grayscale(1) brightness(0.6);
}
.works-item:hover .works-img-wrap img {
  transform: scale(1.05);
  filter: grayscale(0) brightness(0.9);
}