@import "normalize.css";

/* Font */
@font-face {
  font-family: Uzi;
  src: url('helveticanowtext-blackitalic-demo.ttf');
}

/* Base */
*,
*::after,
*::before { box-sizing: border-box; }

:root{
  font-size:16px;
  --color-text:#fff;
  --color-bg:#000;
  --color-link:#fff;
  --color-link-hover:#907030;
  --color-title:#907030;
  --perspective:1500px;
  --grid-item-ratio:1.5;
  --grid-width:100%;
  --grid-height:auto;
  --grid-gap:2vw;
  --grid-columns:4;
  --grid-inner-scale:1;
}

html, body { height: 100%; }
body{
  margin:0;
  color:var(--color-text);
  font-family: Uzi, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  
  background: url("Images/newbg.png") center center no-repeat fixed;
  background-size: cover;

 
}

/* ————— MENU: fixed TOP-LEFT, never centered ————— */
.menu{
  position:fixed;
  top:16px;
  left:16px;
  right:auto;
  margin:0;
  z-index:10000;
  transform:none;              
  font-family:Uzi;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:#fff;
  text-decoration:none;
}
.menu:hover{
  cursor:pointer;
  color:var(--color-link-hover);
}
.menu *, .menu h1, .menu h2{
  position:static !important;  
  top:auto; left:auto;
  translate:none;
  transform:none;
}

/* Helper */
.support{
  position:fixed; z-index:10; left:1rem; top:1rem;
  background:#fff; color:#000; padding:2rem;
  border:4px solid hsl(45 80% 50%);
}

@supports (animation-timeline:view()){
  .support{ display:none; }
}
@supports (animation-timeline: auto) {
  .support{ display:none; }
}


nav{
  position:fixed; top:0; left:0; right:0;
  border-bottom:1px solid hsl(0 0% 50%);
  height:52px; background:hsl(0 0% 20% / 0.75);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px); z-index:2;
}
.nav__content{
  display:flex; align-items:center; justify-content:space-between;
  width:800px; max-width:100vh; padding:0 1rem; margin:0 auto; height:100%;
}
nav a{
  text-decoration:none; background:hsl(220 100% 70%); color:hsl(0 0% 98%);
  font-weight:400; padding:0.5rem 1rem; border-radius:100px; font-size:0.875rem;
}
nav img{ height:50%; justify-self:start; }


video{
  position:fixed; inset:0; object-fit:cover; width:100%; height:100vh;
  z-index:-1; filter:saturate(0.1) brightness(0.5);
  opacity:0; animation:fade-in both linear, fade-out both linear;

  /* Original shorthand timeline */
  animation-timeline: --section;
  animation-range: entry 10% entry 15%, exit 10% exit 15%;
}
@keyframes fade-in{ to{ opacity:1; } }
@keyframes fade-out{ to{ opacity:0; } }

/* Sections */
section{
  position:relative; 
  min-height:calc(var(--vh, 1vh)* 100);
  display:grid; place-items:center;

  /* Your original shorthand: */
  view-timeline: --section;

  /* Safari-friendly longhands (added) */
  view-timeline-name: --section;
  view-timeline-axis: block;
}
section:nth-of-type(1){ height:100vh; }
section:nth-of-type(2){ height:140vh; }
section:nth-of-type(3){ height:200vh; }

/* Headings */
h1{ display:grid; }

/* ⬇️ Scoped so it DOESN’T touch .menu headings */
.section__content :is(h1, h2){
  font-size: clamp(2.5rem, 7vw + 1rem, 10rem);
  text-align: center;
  line-height: 1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-0%, -50%);  
  translate: -50%;         

  /* key fixes so scaling stays centered */
  width: 75%;                  
  max-width: min(90vw, 40ch);
  padding: 0 16px;
  margin: 0;

  /* make the pivot the visual center */
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
}


p span{
  opacity:0.15; animation:highlight both ease-in-out;

  /* original */
  animation-timeline:view();

  
  animation-timeline: view(block);
}
@keyframes highlight{ 50%{ opacity:1; } }

p span:nth-of-type(1){ animation-range:cover 10% cover 45%; }
p span:nth-of-type(2){ animation-range:cover 30% cover 60%; }
p span:nth-of-type(3){ animation-range:cover 45% cover 85%; }
p span:nth-of-type(4){ animation-range:cover 75% cover 120%; }
p span:nth-of-type(5){ animation-range:cover 75% cover 120%; }

.section__content h1 span:first-of-type{
  display:inline-block; animation:fade-away both linear;

  /* original */
  animation-timeline: --section;
  
  animation-range: exit 20% exit 90%;
}
.section__content h1 span:last-of-type{
  display: inline-block;
  animation: scale-up both cubic-bezier(.1,.7,.9,1.3), fade-away both linear;
  animation-timeline: --section;
  /* Simplified for better support */
  animation-range: exit 0% exit 100%;
}
@keyframes scale-up{ to{ scale:1.5; } }


.spandemand {
  font-size: 50px;
  text-align: center;
  color: #000;
  margin-left: 0px;
  opacity: 1;
}


h2{
  animation:grow both ease-in, fade-away both linear;

  /* original */
  animation-timeline: --section;

  
  animation-range: exit-crossing -10% exit-crossing 10%, exit 0% exit 50%;
}
.section__content h1 span:first-of-type{ color:#fff; font-size:0.35em; }
@keyframes grow{ 0%{ scale:0.5; opacity:0; } }
@keyframes fade-away{ 100%{ opacity:0; } }

h2{ font-size:clamp(2rem, 5vw + 1rem, 6rem); text-align:center; }

p{
  font-size:clamp(1.625rem, 3vw + 1rem, 8rem);
  letter-spacing:0; line-height:1;
}

.section__content{
  width:800px; max-width:100vw; padding:0 1rem;
}

/* Footer */
footer{
  display:grid; place-items:start; text-align:left;
  font-size:clamp(1.625rem, 3vw + 1rem, 6rem);
}
footer span:first-of-type{ color:#fff; font-size:0.5em; }


@supports (animation-timeline: auto) and (view-timeline-name: --vt) {
}

@supports not (animation-timeline: auto) {
  main.about {
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y proximity;
  }
  main.about > section { scroll-snap-align: start; }

  
  .section__content :is(h1, h2){
      font-size: clamp(2.5rem, 7vw + 1rem, 10rem);
    text-align: center;
    line-height: 1;
    position: fixed;
    
    width: 100%;
  }
  .section__content :is(h1, h2).is-in{
    opacity:1; transform:scale(1); filter:none;
  }

  
  video{
    opacity:0; transition: opacity .35s ease;
  }
  video.is-in{ opacity:1; }
}

/* |||||||||||||||||||||||||||||||||||||||| MOBILE |||||||||||||||||||||||||||||||||||||||||||||||||||||| */

@media only screen and (max-width: 600px) {
  body {
    background-image: url("Images/newbackgroundmobile.png");
  }
}


@media (max-width: 600px){
  section { overflow: visible; } 

  /* match desktop selector, then override with stronger rules */
  .section__content :is(h1, h2){
    position: fixed;                
  
  top: 50%;
  left: 50%;
  transform: translate(-0%, -50%); 
  translate: -50%;             

  /* key fixes so scaling stays centered */
  width: 75%;              
  max-width: min(90vw, 40ch);
  padding: 0 16px;
  margin: 0;

  /* make the pivot the visual center */
  transform-origin: 50% 50%;

    /* >>> key bits to stop the cut-off <<< */
    width: 70%;                
    max-width: min(92vw, 32ch) !important; 
    padding: 0 12px !important;             
    text-align: center !important;
    line-height: 1.15;
    word-break: normal;
    overflow-wrap: anywhere;

    margin: 0;
    z-index: 1;
    box-sizing: border-box;
  }

  /* sensible base sizes – your animation still scales them */
  .section__content h1{ font-size: clamp(28px, 8vw, 40px); }
  .section__content h2{ font-size: clamp(22px, 7vw, 32px); }
}


/* Make all heading scale animations grow from the center */
.section__content :is(h1, h2),
.section__content h1 span,
.section__content h2 span{
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
}



.bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("Images/newbg.png") center / cover no-repeat;
  pointer-events: none;
  /* helps Safari keep it stable */
  transform: translateZ(0);
  will-change: transform;
}

@supports (-webkit-touch-callout: none) {
  body{
    background: none !important;
  }
}


@media (max-width: 600px){
  .bg{
    background-image: url("Images/newbackgroundmobile.png");
  }
}