/* =============================================================================
   For the Scroll page - using Open Props
   ========================================================================== */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
@import "https://unpkg.com/normalize.css";
@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/open-props.min.css";
@import "https://unpkg.com/open-props/buttons.min.css";

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

body {
    min-height: 100vh;
    font-family: 'Inter', sans-serif, system-ui;
    background: var(--surface-2);
    display: grid;
    justify-items: center;
    align-content: start;
    overflow-x: hidden;
}

:root {
    --content: 66ch;
    --gutter: 1rem;
    --gap: 0rem;
}

header,
main {
    width: var(--content);
    max-width: calc(100vw - (2 * var(--gutter)));
    margin: 0 auto;
}

footer {
    padding: 2rem;
    font-size: 0.875rem;
}

header {
    min-height: 100vh;
    display: grid;
    align-content: center;
}

h1 {
    font-weight: 900;
    font-family: Inter;
    font-size: calc(var(--font-size-fluid-3) * 2.5);
    line-height: 1;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

header {
    position: relative;
}

header img {
    position: absolute;
    left: 45%;
    top: 25%;
    z-index: 1;
    opacity: 0.65;
    filter: saturate(0.5);
    clip-path: polygon(0 15%, 75% 0, 100% 32%, 80% 100%, 0 67%);
}

h1 {
    z-index: 2;
    position: relative;
}

h1 span:nth-of-type(2) {
    color: transparent;
    -webkit-text-stroke: 0.25rem var(--text-1);
}

section {
    display: grid;
    gap: var(--gutter);
    grid-template-columns:
        auto 1fr;
    align-items: center;
    min-height: 100vh;
}

p:first-line {
    text-transform: uppercase;
    font-weight: bold;
}

section p {
    z-index: 2;
    background: hsl(210 17% 98% / 0.65);
    padding: 1rem;
    color: var(--text-1);
    backdrop-filter: blur(4px);
    /*font-size: 1rem;*/
}

@media(prefers-color-scheme: dark) {
    section p {
        background: hsl(210 11% 15% / 0.65);
    }
}

section img {
    grid-column: 1;
    width: 460px;
    max-width: 20vw;
    clip-path: polygon(0 10%, 10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
    scale: 2;
}

section video {
    grid-column: 1;
    width: 460px;
    max-width: 20vw;
    clip-path: polygon(0 10%, 10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
    scale: 2;
}

/* For small screens (e.g., mobile phones) */
@media (--sm) {
    section img {
        max-width: 50vw;
    }
    section video {
        max-width: 50vw;
    }
    /*Make the ring and ring wrapper disapear*/
    .ring {
        opacity: 0;
    }
    .ring-wrapper {
        opacity: 0;
    }
}

/*
section:nth-of-type(even) {
    grid-template-columns:
        1fr auto;
    grid-auto-flow: dense;
}

section:nth-of-type(even) img {
    grid-column: 2;
}

section:nth-of-type(even) video {
    grid-column: 2;
}
section:nth-of-type(even) p {
    grid-column: 1;
}
*/

section {
    --x: -100%;
}

section:nth-of-type(even) {
    --x: 100%;
}

section img {
    view-timeline: --item;
    animation: item-reveal both ease-in;
    animation-timeline: --item;
    animation-delay: cover 10%;
    animation-end-delay: cover 35%;
    animation-range: cover 10% cover 35%;
}
section video {
    view-timeline: --item;
    animation: item-reveal both ease-in;
    animation-timeline: --item;
    animation-delay: cover 10%;
    animation-end-delay: cover 35%;
    animation-range: cover 10% cover 35%;
}

section img {
    --y: 0;
}
section video {
    --y: 0;
}

section p {
    --x: 0;
    --y: 50%;
    view-timeline: --item;
    animation: item-reveal both ease-out;
    animation-timeline: --item;
    animation-delay: cover 35%;
    animation-end-delay: cover 50%;
    animation-range: cover 35% cover 50%;
    position: sticky;
    bottom: 40%;
}

@keyframes item-reveal {
    0% {
        opacity: 0;
        translate: var(--x, 0) var(--y, 0);
    }
}

.ring-wrapper {
    --char-count: 19;
    --inner-angle: calc((360 / var(--char-count, 19)) * 1deg);
    --character-width: 1.0;
    --radius: calc((var(--character-width, 1.0) / 0.32469946920468346) * -1ch);
    --font-size: 1.5rem;
    position: fixed;
    top: 0;
    right: 0;
    height: calc((var(--character-width, 1.0) / 0.32469946920468346) * 3.5ch);
    width: calc((var(--character-width, 1.0) / 0.32469946920468346) * 3.5ch);
    translate: 0% 0%;
    display: grid;
    place-items: center;
    z-index: 10;
    border: calc(var(--character-width) * 2rem) solid var(--surface-2);
    border-radius: 50%;
    font-weight: bold;
}

.ring {
    font-family: monospace;
    text-transform: uppercase;
    font-size: calc(var(--font-size, 1) * 1rem);
    animation: rotation 6s both linear;
    position: relative;
    animation-timeline: scroll(root);
}

.char {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:
        translate(-50%, -50%) rotate(calc(var(--inner-angle) * var(--char-index))) translateY(var(--radius));
}

@keyframes rotation {
    to {
        rotate: 720deg;
    }
}

input[type=text] {
    border-width: var(--border-size-2);
    border-style: solid;
    border-color: var(--gradient-2);

}


.under_title {
  font-size: var(--font-size-6);
  font-weight: var(--font-weight-6);
  background-image: var(--gradient-22); /* Choose your gradient */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: var(--animation-fade-in-bloom);
}

.under_title {
  animation: var(--animation-fade-in-bloom);
  animation-duration: 1.8s;
  animation-delay: 0.3s;
  animation-fill-mode: both;
}

.slight-ease {
  animation: fade-in 300ms var(--ease-1);
}

.dramatic-ease {
  animation: fade-in 1s var(--ease-5);
}

/*_ for the modal window__ */

.icon-btn {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--size-4);
border-radius: var(--radius-3);
transition: background 0.3s ease;
background: var(--surface-2);
}

.icon-btn svg {
width: var(--size-8); /* Bigger icon */
height: var(--size-8);
stroke-width: 2;
}

.icon-btn:hover {
background-image: var(--gradient-21); /* Gradient on hover */
background-size: 200%;
background-position: center;
}

.icon-btn:hover svg {
    transform: scale(1.1);
    }
.icon-btn:active {
transform: scale(0.95); /* Slight shrink for press feedback */
background: var(--surface-3); /* Slightly darker surface */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Inner shadow for depth */
transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.icon-btn:active svg {
transform: scale(1); /* Reset hover scale to avoid conflict */
opacity: 0.85; /* Slight dim for pressed state */
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6); /* Dark overlay */
  backdrop-filter: blur(2px); /* Optional: soft blur for depth */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: var(--surface-2);
  padding: var(--size-6);
  border-radius: var(--radius-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  /*font-size: var(--font-size-3);*/
  color: var(--text-1);
  position: relative;
  min-width: 250px;
  text-align: center;
}

.close-btn {
  all: unset;
  position: absolute;
  top: var(--size-2);
  right: var(--size-2);
  font-size: var(--font-size-4);
  cursor: pointer;
  color: var(--text-2);
}