/* ======================
   Self-hosted font
   ====================== */
@font-face {
  font-family:  'Tangerine';
  src:          url('../fonts/TangerineRegular.woff2') format('woff2'),
                url('../fonts/TangerineRegular.woff')  format('woff'),
                url('../fonts/TangerineRegular.ttf')   format('truetype');
  font-weight:  400;
  font-style:   normal;
  font-display: swap;}

/* ======================
   Figma Design Tokens
   ====================== */
:root {
  --color-white:  #ffffff;
  --color-black:  #000000;
  --color-neon:   #f7f70a;

  /* Color cycle for "Colourful Collection #2"
     Update hex values here to match Figma palette */
  --cycle-white:  #ffffff;
  --cycle-red:    #E1373F;
  --cycle-yellow: #F7CE0A;
  --cycle-green:  #46B07B;
  --cycle-blue:   #12677D;
  --cycle-pink:   #DB7EA9;

  --col-hash: #ffffff; /* tracks current text color for the # glyph */

  --font-display: 'Tangerine', cursive;

  --size-large:   96px;
  --lh-large:     101px;
  --ls-large:     0em;

  --size-small:   24px;
  --lh-small:     25px;
  --ls-small:     0.04px;
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1439px) {
  :root {
    --size-large: 76px;
    --lh-large:   80px;
    --size-small: 20px;
  }
}

/* Tablet portrait */
@media (min-width: 768px) and (orientation: portrait) {
  :root {
    --size-large: 54px;
    --lh-large:   58px;
    --size-small: 16px;
    --lh-small:   20px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --size-large: 54px;
    --lh-large:   58px;
    --size-small: 16px;
  }
}

/* ======================
   Reset & Base
   ====================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html, body {
  width:      100%;
  height:     100%;
  overflow:   hidden;
  background: transparent;
  color:      var(--color-white);
}

/* ======================
   Video Background
   ====================== */
.video-bg {
  position:            fixed;
  inset:               0;
  z-index:             0;
  background-image:    url('../img/poster-desktop.jpg');
  background-size:     cover;
  background-position: center;
}

@media (orientation: portrait) {
  .video-bg {
    background-image: url('../img/poster-mobile.jpg');
  }
}

.bg-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0;
  transition: opacity 1s ease;
}

.bg-video.visible {
  opacity: 1;
}

.video-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.28);
}

/* ======================
   Main Layout — flex column on all breakpoints.
   Logo top, content centered in remaining space, bottom-bar at bottom.
   ====================== */
main {
  position:       relative;
  z-index:        1;
  width:          100%;
  height:         100vh;
  height:         100dvh;
  display:        flex;
  flex-direction: column;
  padding:        30px 58px;
  box-sizing:     border-box;
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1439px) and (orientation: landscape) {
  main {
    padding: 24px 40px;
  }
}

/* Tablet portrait */
@media (min-width: 768px) and (orientation: portrait) {
  main {
    padding: 24px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  main {
    padding: 20px;
  }
}

/* Phone landscape — very compact */
@media (max-height: 500px) and (orientation: landscape) {
  main {
    padding: 12px 30px;
  }
}

/* ======================
   Logotype — first flex item, stays top-left
   ====================== */
.logotype {
  flex-shrink: 0;
  display:     block;
  width:       clamp(110px, 15vw, 210px);
}

.logotype img {
  width:   100%;
  height:  auto;
  display: block;
  filter:  brightness(0) invert(1);
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1439px) and (orientation: landscape) {
  .logotype {
    width: clamp(110px, 17vw, 171px);
  }
}

/* Tablet portrait */
@media (min-width: 768px) and (orientation: portrait) {
  .logotype {
    width: clamp(130px, 20vw, 200px);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .logotype {
    width: clamp(120px, 47vw, 170px);
  }
}

/* Phone landscape */
@media (max-height: 500px) and (orientation: landscape) {
  .logotype {
    width: clamp(70px, 10vw, 110px);
  }
}

/* ======================
   Typography
   ====================== */
.display-large {
  font-family:    var(--font-display);
  font-size:      var(--size-large);
  font-weight:    400;
  line-height:    var(--lh-large);
  letter-spacing: var(--ls-large);
  font-style:     normal;
  color:          var(--color-white);
}

/* # character rendered in Arial — Tangerine's # looks bad */
.hash {
  font-family:    Arial, Helvetica, sans-serif;
  font-size:      0.8em;
  vertical-align: 0.06em;
}

/* ======================
   Colourful Collection — color sweep animation
   JS applies background-clip:text and cycles the gradient.
   Fallback if JS is absent: white text via .display-large.
   ====================== */
#colourful-text {
  -webkit-background-clip: text;
  background-clip:         text;
}

/* # rendered in Arial must keep an explicit color;
   CSS transition follows the sweep duration in JS */
#colourful-text .hash {
  color:      var(--col-hash, #ffffff);
  transition: color 1.8s ease;  /* matches SWEEP_MS in JS */
}

/* ======================
   Content Block — fills space between logo and bottom-bar
   ====================== */
.content {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  width:           100%;
  padding:         16px 0;
}

/* ======================
   Bottom Bar — last flex item, always bottom-left
   ====================== */
.bottom-bar {
  flex-shrink:     0;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       nowrap;
  font-family:     var(--font-display);
  font-size:       var(--size-small);
  font-weight:     400;
  line-height:     var(--lh-small);
  letter-spacing:  var(--ls-small);
  font-style:      normal;
  color:           var(--color-white);
}

/* Tablet portrait + mobile — stack items vertically, left-aligned */
@media (min-width: 768px) and (orientation: portrait) {
  .bottom-bar {
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: flex-start;
    gap:             4px;
  }
}

@media (max-width: 767px) {
  .bottom-bar {
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: flex-start;
    gap:             4px;
  }
}

/* ======================
   Bottom Links — animated curved underline
   ====================== */
.hover-img-trigger {
  cursor: pointer;
}

.bottom-link {
  position:        relative;
  display:         inline-block;
  text-decoration: none;
  color:           inherit;
  font-family:     inherit;
  font-size:       inherit;
  font-weight:     inherit;
  line-height:     inherit;
  letter-spacing:  inherit;
  cursor:          pointer;
}

.link-underline {
  position:       absolute;
  bottom:         -4px;
  left:           0;
  width:          100%;
  height:         10px;
  pointer-events: none;
  /* Hide by clipping from the right; reveal left→right on hover */
  clip-path:      inset(0 100% 0 0);
  transition:     clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-underline path {
  stroke:       currentColor;
  stroke-width: 1.5px;
  fill:         none;
}

.bottom-link:hover .link-underline,
.bottom-link:focus-visible .link-underline {
  clip-path: inset(0 0% 0 0);
}

/* ======================
   Cursor Following Image
   ====================== */
.cursor-image {
  position:       fixed;
  top:            0;
  left:           0;
  z-index:        50;
  pointer-events: none;
  opacity:        0;
  transform:      translate(-50%, calc(-100% - 40px));
  transition:     opacity 0.25s ease;
}

.cursor-image.visible {
  opacity: 1;
}

.cursor-image img {
  display: block;
  width:   min(378px, 65vw);
  height:  auto;
}

@media (min-width: 768px) and (max-width: 1439px) {
  .cursor-image img {
    width: min(260px, 40vw);
  }
}

/* No hover image on touch devices */
@media (hover: none) {
  .cursor-image {
    display: none;
  }
}

/* ======================
   Vernissage Badge
   ====================== */
.vernissage-badge {
  position:        absolute;
  width:           200px;
  height:          200px;
  background:      var(--color-neon);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          default;
  z-index:         10;
}

.vernissage-badge span {
  font-family:    var(--font-display);
  font-size:      var(--size-small);
  line-height:    var(--lh-small);
  color:          var(--color-black);
  text-align:     center;
  pointer-events: none;
  user-select:    none;
}

@media (min-width: 768px) and (max-width: 1439px) {
  .vernissage-badge {
    width:  150px;
    height: 150px;
  }
  .vernissage-badge span {
    font-size:   18px;
    line-height: 22px;
  }
}

@media (min-width: 768px) and (orientation: portrait) {
  .vernissage-badge {
    width:  120px;
    height: 120px;
  }
  .vernissage-badge span {
    font-size:   16px;
    line-height: 20px;
  }
}

@media (max-width: 767px) {
  .vernissage-badge {
    width:  84px;
    height: 84px;
  }
  .vernissage-badge span {
    font-size:   12px;
    line-height: 15px;
  }
}