/* Font declarations */
@font-face {
  font-family: 'Meslo LG L';
  src: url('fonts/MesloLGL-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Meslo LG L';
  src: url('fonts/MesloLGL-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Meslo LG L';
  src: url('fonts/MesloLGL-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Meslo LG L';
  src: url('fonts/MesloLGL-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Meslo LG M';
  src: url('fonts/MesloLGM-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Meslo LG M';
  src: url('fonts/MesloLGM-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Meslo LG M';
  src: url('fonts/MesloLGM-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Meslo LG M';
  src: url('fonts/MesloLGM-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Meslo LG S';
  src: url('fonts/MesloLGS-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Meslo LG S';
  src: url('fonts/MesloLGS-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Meslo LG S';
  src: url('fonts/MesloLGS-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Meslo LG S';
  src: url('fonts/MesloLGS-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

:root{
    --bg: #ffd9e6;                 /* pastel pink */
    --radius: 14px;
    --shadow: 0 8px 28px rgba(0,0,0,.18);
    --btn: clamp(20px, 4vmin, 40px);
  }
  
  html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    overflow: hidden;              /* no scrolling ever */
    font-family: 'Meslo LG S', monospace, system-ui, sans-serif;
  }
  
  main {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    place-items: center;
    gap: 1.5vmin;
    padding: 2vmin;
  }
  
  h1 {
    margin: 0;
    font-size: clamp(1.25rem, 4.5vmin, 2rem);
    text-align: center;
    margin-top: 20px;
    color: #d54b4b;
    position: relative;
    z-index: 10;             /* Above the valentine overlay */
  }
  
  /* hide radios */
  input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
  
  @keyframes levitate {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-15px);
    }
  }

  .frame-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    animation: levitate 4s ease-in-out infinite;
  }
  
  /* The PNG frame — slightly larger, wraps around */
  .frame-wrapper::before {
    content: "";
    position: absolute;

    inset: -15%; /* expand beyond carousel, tweak this value */
    background-image: url("assets/frame.png");
    background-repeat: no-repeat;
    background-size: 101% 93%;
    background-position: center;
    transform: translate(0%, -1.5%);
    pointer-events: none; /* keep interactivity below */
    z-index: 3;
  }

  /* Frame scales to fit viewport, preserving a 3:2 area */
  .frame{
    position: relative;
    width: min(80vw, 80vh * 3 / 4);
    height: calc(min(80vw, 80vh * 3 / 4) * 4 / 3);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: transparent;
    touch-action: pan-y;    /* allow horizontal swipes to reach JS */
    user-select: none;       /* prevent text selection */
    z-index: 2;             /* Above the valentine overlay */
    border-top-right-radius: 8vmin;
    border-bottom-right-radius: 5vmin;
    border-top-left-radius: 10.5vmin;
    border-bottom-left-radius: 8.65vmin;
  }

  
  /* Slides container */
  .slides {
    display: flex;
    z-index: 2; 
    height: 100%;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    border-top-right-radius: 9.1vmin;
    border-bottom-right-radius: 5vmin;
    border-top-left-radius: 10.5vmin;
    border-bottom-left-radius: 8.6vmin;
    will-change: transform;
  }
  
  /* Individual slide wrapper */
  .slide {
    flex-shrink: 0;
    width: 100%;
    z-index: 2; 
    height: 100%;
    position: relative;
    background: linear-gradient(#ffd9e6, #ffd9e6);
  }
  
  
  /* Slides */
  .frame img{
    z-index: 2; 
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 4 / 3;
    border-top-right-radius: 9.1vmin;
    border-bottom-right-radius: 5vmin;
    border-top-left-radius: 10.5vmin;
    border-bottom-left-radius: 8.6vmin;
  }
  
  /* Caption at the bottom of each slide */
  .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 0px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: clamp(1rem, 2vmin, 1.2rem);
    text-align: center;
  }
  
  /* Slide positions based on checked radio */
  #s1:checked ~ .frame-wrapper .frame .slides { transform: translateX(0%); }
  #s2:checked ~ .frame-wrapper .frame .slides { transform: translateX(-100%); }
  #s3:checked ~ .frame-wrapper .frame .slides { transform: translateX(-200%); }
  #s4:checked ~ .frame-wrapper .frame .slides { transform: translateX(-300%); }
  #s5:checked ~ .frame-wrapper .frame .slides { transform: translateX(-400%); }
  #s6:checked ~ .frame-wrapper .frame .slides { transform: translateX(-500%); }
  #s7:checked ~ .frame-wrapper .frame .slides { transform: translateX(-600%); }
  #s8:checked ~ .frame-wrapper .frame .slides { transform: translateX(-700%); }
  #s9:checked ~ .frame-wrapper .frame .slides { transform: translateX(-800%); }
  #s10:checked ~ .frame-wrapper .frame .slides { transform: translateX(-900%); }
  #s11:checked ~ .frame-wrapper .frame .slides { transform: translateX(-1000%); }
  
  /* Arrows — hidden by default, shown per-state */
  .arrow{
    display: none;                 /* IMPORTANT: prevent ghost clicks */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--btn);
    height: var(--btn);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    background: transparent;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    cursor: pointer;
  }
  .arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.45em;
    height: 0.45em;
    border-top: 0.18em solid #8ab9ff;
    border-right: 0.18em solid #ff8acb;
    transform: translate(20%) rotate(-135deg);
    transform-origin: center;

  }
  .right::before {
    transform: translate(-20%) rotate(45deg);
  }
  
  .left  { left: 1.5%; }
  .right { right: 1.5%; }
  
  .arrow:hover,
  .arrow:focus-visible { background: rgba(255,255,255,.9); outline: none; }
  
  /* Show the correct pair for each state (infinite wrap) */
  #s1:checked ~  .frame-wrapper .frame .a1,
  #s1:checked ~  .frame-wrapper .frame .b1,
  #s2:checked ~  .frame-wrapper .frame .a2,
  #s2:checked ~  .frame-wrapper .frame .b2,
  #s3:checked ~  .frame-wrapper .frame .a3,
  #s3:checked ~  .frame-wrapper .frame .b3,
  #s4:checked ~  .frame-wrapper .frame .a4,
  #s4:checked ~  .frame-wrapper .frame .b4,
  #s5:checked ~  .frame-wrapper .frame .a5,
  #s5:checked ~  .frame-wrapper .frame .b5,
  #s6:checked ~  .frame-wrapper .frame .a6,
  #s6:checked ~  .frame-wrapper .frame .b6,
  #s7:checked ~  .frame-wrapper .frame .a7,
  #s7:checked ~  .frame-wrapper .frame .b7,
  #s8:checked ~  .frame-wrapper .frame .a8,
  #s8:checked ~  .frame-wrapper .frame .b8,
  #s9:checked ~  .frame-wrapper .frame .a9,
  #s9:checked ~  .frame-wrapper .frame .b9,
  #s10:checked ~  .frame-wrapper .frame .a10,
  #s10:checked ~  .frame-wrapper .frame .b10,
  #s11:checked ~  .frame-wrapper .frame .a11,
  #s11:checked ~  .frame-wrapper .frame .b11  { display: block; }
  
  /* When viewport is very short, tighten spacing above */
  @media (max-height: 420px){
    main{ gap: 0.8vmin; padding: 1vmin; }
  }

  @media (max-width: 450px) {
    .frame-wrapper{ scale: 1; }

  }

  @media (min-width: 450px) {
    .frame-wrapper{ scale: 0.8; }
  }

  /* Valentine overlay - covers entire page */
  .valentine-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-image: url('assets/valentine.gif');
    background-repeat: repeat;
    pointer-events: none;  /* Allow interaction with content below */
    z-index: 1;            /* Behind the content */
  }