/* =========================================================
   TIKKI / CONGRATS — STYLE.CSS
   Flow:
   INTRO
   → CONGRATS + MEMORY (SCROLL)
   → EVOLUTION
   → FINAL STORY
========================================================= */


/* =========================================================
   00 / ROOT
========================================================= */

:root {
  --red: #b51f35;
  --red-dark: #861625;
  --red-deep: #68121d;

  --cream: #f4efe7;
  --paper: #fffaf4;
  --white: #ffffff;

  --black: #171314;
  --text-soft: #6c5d58;

  --line: #d9cec7;

  --gold: #d8a51e;
}


/* =========================================================
   01 / RESET
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow: hidden;

  background: var(--black);

  color: var(--black);

  font-family:
    "IBM Plex Sans Thai",
    sans-serif;

  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

img {
  user-select: none;
  -webkit-user-drag: none;
}


/* =========================================================
   02 / APP + SCENE
========================================================= */

#app {
  position: relative;

  width: 100%;
  height: 100svh;

  overflow: hidden;
}

.scene {
  position: absolute;

  inset: 0;

  width: 100%;
  min-height: 100svh;

  padding:
    26px
    clamp(22px, 5vw, 70px);

  display: flex;
  flex-direction: column;

  overflow-y: auto;
  overscroll-behavior: contain;

  background: var(--cream);

  opacity: 0;
  visibility: hidden;

  transform: translateY(18px) scale(.995);

  transition:
    opacity .4s ease,
    transform .6s cubic-bezier(.2, .8, .2, 1),
    visibility .4s;

  pointer-events: none;
}

.scene.active {
  z-index: 5;

  opacity: 1;
  visibility: visible;

  transform: none;

  pointer-events: auto;
}


/* =========================================================
   03 / COMMON UI
========================================================= */

.chrome,
.memory-label {
  width: 100%;

  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 15px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .11em;

  text-transform: uppercase;

  opacity: .55;
}

.pill {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: fit-content;

  padding: 7px 11px;

  border:
    1px solid currentColor;

  border-radius: 999px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .1em;

  line-height: 1;
}

.cta {
  width: min(430px, 100%);

  margin-top: auto;
  margin-left: auto;

  padding: 17px 19px;

  border: 0;

  border-radius: 14px;

  background: var(--red);

  color: white;

  display: flex;

  justify-content: space-between;
  align-items: center;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .02em;

  cursor: pointer;

  transition:
    transform .2s ease,
    background .2s ease;
}

.cta:active {
  transform: scale(.98);
}


/* =========================================================
   04 / INTRO
========================================================= */

.intro {
  isolation: isolate;

  background:
    var(--red);

  color: var(--paper);

  overflow: hidden;
}

.intro::before {
  content: "";

  position: absolute;

  width: 65vw;
  height: 65vw;

  max-width: 800px;
  max-height: 800px;

  top: -20%;
  right: -15%;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, .08);

  filter: blur(2px);

  z-index: -1;
}

.intro::after {
  content: "";

  position: absolute;

  width: 45vw;
  height: 45vw;

  left: -15%;
  bottom: -20%;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius: 50%;

  z-index: -1;
}

.intro .chrome {
  color: white;
}

.intro-copy {
  margin: auto 0;

  position: relative;
}

.intro-copy .pill {
  color: white;
}

.intro h1 {
  max-width: 900px;

  margin:
    24px 0
    18px;

  font-size:
    clamp(
      62px,
      11vw,
      135px
    );

  line-height: .82;

  letter-spacing: -.075em;

  font-weight: 700;
}

.intro-copy p {
  margin: 0;

  font-size:
    clamp(
      13px,
      2vw,
      17px
    );

  opacity: .7;
}

.intro .cta {
  background: var(--paper);

  color: var(--red);
}


/* =========================================================
   05 / JOURNEY (CONGRATS + MEMORY เลื่อนต่อเนื่องแบบสมูท)
========================================================= */

.journey {
  padding: 0;

  display: block;

  background: var(--cream);

  overflow-y: auto;

  /* ปรับแต่ง Smooth Scroll & Snap */
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.journey-part {
  position: relative;

  width: 100%;

  min-height: 100svh;

  padding:
    26px
    clamp(22px, 5vw, 70px);

  display: flex;
  flex-direction: column;

  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.journey-content {
  width: 100%;

  margin: auto 0;

  display: grid;

  gap: 35px;

  align-items: center;
}


/* =========================================================
   06 / POLAROID + FLOATING ANIMATION
========================================================= */

.polaroid {
  position: relative;

  width: min(78vw, 340px);

  padding:
    10px
    10px
    13px;

  justify-self: center;

  background: #fffdf9;

  box-shadow:
    0 24px 60px
    rgba(48, 30, 25, .13);

  transform-origin: center;

  will-change: transform;
}

.polaroid::before {
  content: "";

  position: absolute;

  width: 72px;
  height: 22px;

  top: -10px;
  left: 50%;

  transform:
    translateX(-50%)
    rotate(-2deg);

  background:
    rgba(225, 211, 190, .65);

  backdrop-filter: blur(2px);
}

/* ใส่แอนิเมชันลอยดุ๊กดิ๊กนุ่มนวล */
.polaroid-one {
  animation: floatPolaroidOne 6s ease-in-out infinite;
}

.polaroid-two {
  animation: floatPolaroidTwo 7s ease-in-out infinite;
}

@keyframes floatPolaroidOne {
  0%, 100% {
    transform: rotate(-3deg) translateY(0px);
  }
  50% {
    transform: rotate(-1.5deg) translateY(-12px);
  }
}

@keyframes floatPolaroidTwo {
  0%, 100% {
    transform: rotate(3deg) translateY(0px);
  }
  50% {
    transform: rotate(4.5deg) translateY(-10px);
  }
}

.polaroid-photo {
  width: 100%;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  background: var(--black);
}

.polaroid-photo img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  transition:
    transform 1.2s
    cubic-bezier(.2,.8,.2,1);
}

.journey.active
.polaroid-photo img {
  transform: scale(1.025);
}

.polaroid-caption {
  min-height: 44px;

  padding:
    12px
    5px
    2px;

  display: flex;

  align-items: center;

  color: #292020;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .08em;
}


/* =========================================================
   07 / JOURNEY TYPOGRAPHY
========================================================= */

.journey-copy {
  position: relative;
}

.journey-copy h2 {
  margin:
    18px 0
    16px;

  font-size:
    clamp(
      50px,
      12vw,
      90px
    );

  line-height: .84;

  letter-spacing: -.065em;

  font-weight: 700;
}

.journey-copy h2 em {
  color: var(--red);

  font-style: normal;
}

.journey-copy p {
  max-width: 590px;

  margin:
    13px 0;

  color: var(--text-soft);

  font-size:
    clamp(
      13px,
      2vw,
      15px
    );

  line-height: 1.75;
}

.proud {
  display: block;

  margin-top: 25px;

  color: var(--red);

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(
      17px,
      3vw,
      22px
    );

  font-weight: 700;

  letter-spacing: -.03em;
}


/* =========================================================
   08 / SCROLL HINT
========================================================= */

.scroll-hint {
  width: 100%;

  padding:
    18px 0
    5px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  border-top:
    1px solid var(--line);

  color: var(--red);

  margin-top: auto;
}

.scroll-hint span {
  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: .12em;
}

.scroll-hint b {
  font-size: 20px;

  animation:
    scrollDown 1.2s
    ease-in-out infinite;
}

@keyframes scrollDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }

}


/* =========================================================
   09 / MEMORY
========================================================= */

.memory-part {
  background:
    var(--paper);

  border-radius:
    28px 28px
    0 0;
}

.memory-label {
  color: #81736e;

  opacity: 1;
}

.memory-part .cta {
  margin-top: 45px;
}


/* =========================================================
   10 / EVOLUTION
========================================================= */

.evolve {
  position: absolute;

  isolation: isolate;

  overflow: hidden;

  background:
    var(--red-dark);

  color: white;
}

.evolve .chrome {
  position: relative;

  z-index: 10;

  color: white;
}

.evolve-center {
  position: relative;

  z-index: 5;

  width: 100%;

  margin: auto;

  text-align: center;
}

.evolve-center h2 {
  margin:
    22px 0
    12px;

  color: white;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(
      58px,
      10vw,
      110px
    );

  font-weight: 700;

  line-height: .83;

  letter-spacing: -.065em;
}

.evolve-center > p {
  margin:
    0 0
    10px;

  font-size: 14px;

  opacity: .65;
}


/* =========================================================
   11 / HOLD BUTTON
========================================================= */

.hold {
  position: relative;

  width: 220px;
  height: 220px;

  margin:
    20px auto
    18px;

  padding: 0;

  border: 0;

  background: transparent;

  color: white;

  display: block;

  cursor: pointer;

  touch-action: none;

  transition:
    transform .25s ease,
    filter .25s ease;
}

.hold svg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  transform: rotate(-90deg);
}

.hold circle {
  fill: none;

  stroke-width: 5;
}

.track {
  stroke:
    rgba(255,255,255,.14);
}

.progress {
  stroke: white;

  stroke-linecap: round;

  stroke-dasharray: 383.3;

  stroke-dashoffset: 383.3;
}

.hold > div {
  position: absolute;

  inset: 0;

  display: grid;

  place-content: center;
}

.hold strong {
  display: block;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 44px;

  font-weight: 700;

  line-height: 1;
}

.hold span {
  display: block;

  margin-top: 7px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 7px;

  font-weight: 700;

  line-height: 1.15;

  opacity: .5;
}

.loading-copy {
  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .1em;

  opacity: .45;
}


/* =========================================================
   12 / EVOLUTION FX
========================================================= */

.evolve-fx {
  position: absolute;

  inset: 0;

  z-index: 1;

  overflow: hidden;

  pointer-events: none;
}

.energy-glow {
  position: absolute;

  width: 120px;
  height: 120px;

  left: 50%;
  top: 62%;

  transform:
    translate(-50%, -50%)
    scale(.4);

  border-radius: 50%;

  background:
    rgba(255,255,255,.12);

  filter: blur(20px);

  opacity: 0;

  transition:
    transform 2.2s ease,
    opacity .3s ease;
}

.evolve.charging
.energy-glow {
  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(9);
}


/* =========================================================
   13 / PULSE
========================================================= */

.evolve.charging
.hold {
  transform: scale(.97);

  filter:
    drop-shadow(
      0 0 22px
      rgba(255,255,255,.2)
    );
}

.evolve.charging
.hold::before,

.evolve.charging
.hold::after {
  content: "";

  position: absolute;

  inset: 7px;

  border:
    1px solid
    rgba(255,255,255,.38);

  border-radius: 50%;

  animation:
    evolvePulse
    1.25s
    ease-out
    infinite;
}

.evolve.charging
.hold::after {
  animation-delay: .6s;
}

@keyframes evolvePulse {

  from {
    transform: scale(.82);
    opacity: .7;
  }

  to {
    transform: scale(1.6);
    opacity: 0;
  }

}


/* =========================================================
   14 / ENERGY RINGS
========================================================= */

.energy-ring {
  position: absolute;

  width: 220px;
  height: 220px;

  left: 50%;
  top: 62%;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius: 50%;

  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(.5);
}

.evolve.charging
.energy-ring {
  animation:
    energyRing
    1.5s
    ease-out
    infinite;
}

.evolve.charging
.ring-2 {
  animation-delay: .7s;
}

@keyframes energyRing {

  0% {
    opacity: .55;

    transform:
      translate(-50%, -50%)
      scale(.75);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(2.1);
  }

}


/* =========================================================
   15 / ENERGY LINES
========================================================= */

.energy-lines i {
  position: absolute;

  width: 1px;
  height: 80px;

  left: 50%;
  top: 62%;

  background:
    linear-gradient(
      to top,
      transparent,
      rgba(255,255,255,.75)
    );

  opacity: 0;
}

.evolve.charging
.energy-lines i {
  animation:
    energyUp
    .85s
    linear
    infinite;
}

.energy-lines i:nth-child(1) {
  margin-left: -135px;
  animation-delay: 0s;
}

.energy-lines i:nth-child(2) {
  margin-left: -85px;
  animation-delay: .15s;
}

.energy-lines i:nth-child(3) {
  margin-left: -35px;
  animation-delay: .3s;
}

.energy-lines i:nth-child(4) {
  margin-left: 35px;
  animation-delay: .1s;
}

.energy-lines i:nth-child(5) {
  margin-left: 85px;
  animation-delay: .25s;
}

.energy-lines i:nth-child(6) {
  margin-left: 135px;
  animation-delay: .4s;
}

@keyframes energyUp {

  0% {
    transform:
      translateY(110px);

    opacity: 0;
  }

  25% {
    opacity: .7;
  }

  100% {
    transform:
      translateY(-280px);

    opacity: 0;
  }

}


/* =========================================================
   16 / CHARGING TEXT
========================================================= */

.evolve.charging
#pct {
  animation:
    numberCharge
    .28s
    ease-in-out
    infinite alternate;
}

@keyframes numberCharge {

  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }

}

.evolve.charging
.loading-copy {
  color: white;

  opacity: 1;

  animation:
    loadingBlink
    .5s
    ease-in-out
    infinite alternate;
}

@keyframes loadingBlink {

  from {
    opacity: .4;
  }

  to {
    opacity: 1;
  }

}


/* =========================================================
   17 / ALMOST DONE
========================================================= */

.evolve.almost-done
.evolve-center {
  animation:
    tinyShake
    .1s
    linear
    infinite;
}

@keyframes tinyShake {

  0% {
    transform: translate(0,0);
  }

  25% {
    transform: translate(-1px,1px);
  }

  50% {
    transform: translate(1px,-1px);
  }

  75% {
    transform: translate(1px,1px);
  }

  100% {
    transform: translate(0,0);
  }

}


/* =========================================================
   18 / FLASH
========================================================= */

.flash {
  position: fixed;

  inset: 0;

  z-index: 999;

  background: white;

  pointer-events: none;

  animation:
    evolutionFlash
    .65s
    ease
    forwards;
}

@keyframes evolutionFlash {

  0% {
    opacity: 0;
  }

  22% {
    opacity: 1;
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }

}


/* =========================================================
   19 / FINAL
========================================================= */

.final {
  padding: 0;

  background:
    #151112;

  align-items: center;

  overflow-y: auto;
}

.story-wrap {
  width: 100%;

  min-height: 100svh;

  display: grid;

  place-items: center;
}


/* =========================================================
   20 / STORY 9:16
========================================================= */

.story-card {
  width:
    min(
      100vw,
      calc(100svh * .5625)
    );

  height:
    min(
      177.777vw,
      100svh
    );

  aspect-ratio: 9 / 16;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background:
    var(--cream);

  position: relative;
}


/* =========================================================
   21 / STORY HERO
========================================================= */

.story-hero {
  position: relative;

  width: 100%;

  height: 54%;
  flex: 0 0 54%;

  overflow: hidden;

  background:
    var(--black);
}

.story-photo {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.story-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.04) 0%,
      rgba(0,0,0,.02) 35%,
      rgba(0,0,0,.3) 65%,
      rgba(0,0,0,.95) 100%
    );
}


/* =========================================================
   22 / STORY TOP
========================================================= */

.story-top {
  position: absolute;

  z-index: 2;

  top: 5%;
  left: 6%;
  right: 6%;

  display: flex;

  align-items: center;
  justify-content: space-between;

  color: white;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(
      7px,
      1.4vh,
      10px
    );

  font-weight: 700;

  letter-spacing: .08em;
}

.story-top b {
  padding:
    7px 10px;

  border-radius: 999px;

  background:
    var(--cream);

  color:
    var(--black);

  font-size: .82em;
}


/* =========================================================
   23 / STORY TITLE
========================================================= */

.story-title {
  position: absolute;

  z-index: 2;

  left: 6%;
  right: 6%;
  bottom: 5%;

  color: white;
}

.story-title > small {
  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(
      7px,
      1.3vh,
      10px
    );

  font-weight: 700;

  letter-spacing: .12em;
}

.story-title h2 {
  margin:
    10px 0
    18px;

  color: white;

  font-size:
    clamp(
      42px,
      7.7vh,
      76px
    );

  font-weight: 700;

  line-height: .78;

  letter-spacing: -.07em;
}

.story-title h2 em {
  color:
    var(--gold);

  font-style: normal;
}


/* =========================================================
   24 / UNIVERSITY
========================================================= */

.university {
  display: flex;

  align-items: center;

  gap: 10px;
}

.tu-logo {
  width: 46px;
  height: 46px;

  flex: 0 0 auto;

  border-radius: 50%;

  display: grid;

  place-items: center;

  background:
    var(--red);

  color: white;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 13px;

  font-weight: 700;
}

.university > div:last-child {
  display: flex;

  flex-direction: column;
}

.university small {
  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 6px;

  font-weight: 700;

  opacity: .55;
}

.university b {
  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 9px;

  font-weight: 700;
}

.university span {
  font-size: 8px;

  opacity: .8;
}


/* =========================================================
   25 / STORY STATS
========================================================= */

.story-stats {
  width: 100%;

  height: 46%;
  flex: 0 0 46%;

  padding:
    4.2% 6%;

  display: flex;
  flex-direction: column;

  justify-content:
    space-between;

  background:
    var(--cream);
}

.stats-head {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  padding-bottom: 2.4%;

  border-bottom:
    1px solid var(--line);
}

.stats-head > div {
  display: flex;

  flex-direction: column;
}

.stats-head small,
.qr-row small {
  color: #8c7b75;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 6px;

  font-weight: 700;

  letter-spacing: .09em;
}

.stats-head b {
  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 12px;

  font-weight: 700;
}

.stats-head > span {
  color:
    var(--red);

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 7px;

  font-weight: 700;
}


/* =========================================================
   26 / STAT
========================================================= */

.stat > div:first-child {
  display: flex;

  align-items: center;
  justify-content: space-between;

  font-size: 10px;
}

.stat b {
  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 9px;

  font-weight: 700;
}

.bar {
  width: 100%;

  height: 5px;

  margin-top: 3px;

  overflow: hidden;

  border-radius: 99px;

  background:
    #ddd4cf;
}

.bar i {
  display: block;

  width: 0;
  height: 100%;

  border-radius: inherit;

  background:
    var(--red);

  transition:
    width 1s
    cubic-bezier(.2,.8,.2,1);
}

.error b,
.error small {
  color:
    var(--red);
}

.error > small {
  display: block;

  margin-top: 2px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 5px;

  font-weight: 700;
}


/* =========================================================
   27 / FINAL RESULT
========================================================= */

.result {
  padding:
    2.6% 3%;

  border-radius: 11px;

  background:
    var(--red);

  color: white;
}

.result small,
.result b,
.result span {
  display: block;
}

.result small {
  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 5px;

  font-weight: 700;

  opacity: .65;
}

.result b {
  margin-top: 2px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 10px;

  font-weight: 700;
}

.result span {
  font-size: 7px;
}


/* =========================================================
   28 / QR
========================================================= */

.qr-row {
  display: flex;

  align-items: center;

  gap: 8px;

  padding-top: 2.5%;

  border-top:
    1px solid var(--line);
}

.qr-placeholder,
.qr-image {
  width: 42px;
  height: 42px;

  flex: 0 0 auto;

  border-radius: 7px;
}

.qr-placeholder {
  display: grid;

  place-items: center;

  border:
    1px dashed #9b8d87;

  background: white;

  color: #9b8d87;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 8px;

  font-weight: 700;
}

.qr-image {
  display: block;

  object-fit: cover;

  background: white;
}

.qr-row > div:last-child {
  display: flex;

  flex-direction: column;
}

.qr-row b {
  font-size: 9px;
}


/* =========================================================
   29 / STORY FOOTER
========================================================= */

.story-footer {
  display: flex;

  flex-direction: column;
}

.story-footer span {
  color:
    var(--red);

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 6px;

  font-weight: 700;

  letter-spacing: .08em;
}

.story-footer b {
  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 8px;

  font-weight: 700;
}


/* =========================================================
   30 / SAVE STORY
========================================================= */

.story-actions {
  width:
    min(
      460px,
      100%
    );

  padding:
    15px 16px
    22px;
}

.story-actions button {
  width: 100%;

  padding:
    15px 17px;

  border: 0;

  border-radius: 13px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  background:
    var(--red);

  color: white;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 10px;

  font-weight: 700;

  cursor: pointer;
}

.story-actions button:active {
  transform: scale(.98);
}

.story-actions button:disabled {
  opacity: .55;
}

.story-actions p {
  margin:
    8px 0 0;

  color: white;

  text-align: center;

  font-size: 9px;

  opacity: .45;
}


/* =========================================================
   31 / DOT NAVIGATION
========================================================= */

.dots {
  position: fixed;

  z-index: 30;

  top: 50%;
  right: 10px;

  display: grid;

  gap: 7px;

  transform:
    translateY(-50%);
}

.dots button {
  width: 5px;
  height: 5px;

  padding: 0;

  border: 0;

  border-radius: 99px;

  background:
    rgba(80,70,70,.3);

  transition:
    height .25s ease,
    background .25s ease;
}

.dots button.on {
  height: 18px;

  background:
    var(--red);
}


/* =========================================================
   32 / DESKTOP
========================================================= */

@media (min-width: 850px) {

  .journey-content {
    grid-template-columns:
      minmax(300px, .85fr)
      minmax(400px, 1.15fr);

    gap: 7vw;
  }


  .polaroid {
    width:
      min(
        29vw,
        410px
      );
  }


  .journey-copy h2 {
    font-size:
      clamp(
        68px,
        7vw,
        108px
      );
  }


  /*
    MEMORY สลับด้าน
  */

  .memory-content
  .polaroid {
    order: 2;
  }

  .memory-content
  .journey-copy {
    order: 1;
  }


  /*
    Story บนคอมให้เห็นเต็มใบ
  */

  .final {
    padding-top: 28px;
  }

  .story-card {
    height:
      calc(
        100svh - 56px
      );

    width: auto;

    border-radius: 22px;
  }

}


/* =========================================================
   33 / MOBILE
========================================================= */

@media (max-width: 699px) {

  .scene {
    padding:
      22px;
  }


  /* INTRO */

  .intro h1 {
    font-size:
      clamp(
        58px,
        17vw,
        82px
      );
  }


  /* JOURNEY */

  .journey {
    padding: 0;
  }

  .journey-part {
    padding:
      23px
      22px
      28px;
  }

  .journey-content {
    margin:
      52px 0
      48px;

    gap: 40px;
  }


  /* POLAROID */

  .polaroid {
    width:
      min(
        72vw,
        300px
      );

    padding:
      8px
      8px
      12px;
  }

  .polaroid-photo {
    aspect-ratio:
      4 / 5;
  }


  /* COPY */

  .journey-copy h2 {
    font-size:
      clamp(
        48px,
        13.5vw,
        65px
      );
  }

  .journey-copy p {
    font-size: 13px;
  }


  /* MEMORY */

  .memory-part {
    border-radius:
      24px 24px
      0 0;
  }

  .memory-part
  .cta {
    margin-top: 55px;
  }


  /* EVOLUTION */

  .evolve-center h2 {
    font-size:
      clamp(
        58px,
        16vw,
        78px
      );
  }

  .hold {
    width: 200px;
    height: 200px;
  }


  /* FINAL */

  .final {
    padding: 0;
  }

  .story-wrap {
    min-height: auto;
  }

  .story-card {
    width: 100vw;

    height: auto;

    min-height: 100svh;

    aspect-ratio:
      9 / 16;

    border-radius: 0;
  }


  .dots {
    display: none;
  }


  .story-actions {
    padding-bottom:
      calc(
        20px +
        env(
          safe-area-inset-bottom
        )
      );
  }

}


/* =========================================================
   34 / SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .journey-content {
    margin:
      42px 0;
  }

  .polaroid {
    width:
      min(
        70vw,
        270px
      );
  }

  .journey-copy h2 {
    font-size:
      clamp(
        43px,
        13vw,
        56px
      );
  }

  .hold {
    width: 185px;
    height: 185px;
  }

}


/* =========================================================
   35 / REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

    scroll-behavior:
      auto !important;
  }

}