:root {
  /* IntersectionObserver` with `threshold: 0.15` to detect when review cards enter the viewport. On entry Source Sans 3" (Google Fonts Space */
  --dawn-lavender: #e8e0f4;
  --ice-violet: #f5f0fa;
  --cool-field: #f0f2fa;
  --cool-blue: #e0e8f4;
  --wisteria: #d4c8e8;
  --periwinkle: #c8d8f0;
  --sky-crystal: #c8e0f8;
  --rose-quartz: #f0c8d0;
  --fairy-mint: #d0f0c8;
  --midnight-iris: #3a2d5c;
  --twilight-plum: #4a3f5e;
  --dusty-lavender: #8b7fa8;
  --card-surface: #faf8fd;
  --white: #ffffff;
  --gradient-angle: 165deg;
}

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 165deg;
  inherits: false;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  font-family: "Source Sans 3", Inter, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--twilight-plum);
  background: linear-gradient(var(--gradient-angle) in oklch, var(--dawn-lavender), var(--ice-violet) 42%, var(--cool-field) 100%);
  animation: rotateGradient 120s linear infinite;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -12vh auto -12vh 0;
  width: 21vw;
  pointer-events: none;
  opacity: 0.35;
  background-image: radial-gradient(circle, rgba(255,255,255,0.7) 0 1px, transparent 2px), linear-gradient(165deg, transparent 45%, rgba(200, 224, 248, 0.34) 45.3%, transparent 46%);
  background-size: 48px 72px, 100% 260px;
  filter: blur(0.2px);
  animation: breathePattern 18s ease-in-out infinite;
  z-index: -2;
}

body::after {
  left: auto;
  right: 0;
  animation-delay: -8s;
  transform: scaleX(-1);
}

a { color: inherit; text-decoration: none; }

h1,
h2 {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  color: var(--midnight-iris);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

p { margin: 0; }

.ambient-fields {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.field {
  position: absolute;
  width: 44vw;
  height: 44vw;
  opacity: 0.2;
  filter: blur(55px);
  clip-path: polygon(12% 0, 100% 18%, 82% 100%, 0 74%);
  background: radial-gradient(circle at 35% 35%, var(--white), transparent 18%), radial-gradient(circle at 48% 48%, var(--rose-quartz), transparent 35%), radial-gradient(circle at 68% 55%, var(--sky-crystal), transparent 42%);
  animation: floatField 34s ease-in-out infinite;
}

.field-one { top: 6vh; left: -18vw; }
.field-two { right: -17vw; bottom: 18vh; animation-delay: -14s; }

.story-section {
  min-height: 100svh;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(56px, 9vw, 132px) clamp(24px, 6vw, 72px);
}

.section-channel {
  width: min(680px, 100%);
  margin-inline: auto;
  position: relative;
}

.hero-section {
  overflow: hidden;
  background: linear-gradient(165deg in oklch, rgba(232,224,244,0.95), rgba(245,240,250,0.62));
}

.hero-copy {
  width: min(920px, 100%);
  transform: translateY(11vh);
  text-align: center;
  animation: fadeSlideUp 1.4s ease 0.5s both;
}

.hero-copy h1 {
  font-size: clamp(4rem, 10vw, 8rem);
  overflow-wrap: anywhere;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.tagline {
  margin-top: 22px;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--twilight-plum);
}

.section-label,
.card-meta,
.review-author {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dusty-lavender);
}

.section-label { margin-bottom: 20px; }

.lens-flare {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.9) 0 10px, transparent 11px),
    radial-gradient(circle at center, rgba(240,200,208,0.4) 0 24px, rgba(200,224,248,0.34) 36px, rgba(208,240,200,0.28) 58px, transparent 61px),
    radial-gradient(circle at center, rgba(200,192,240,0.15) 0 100px, transparent 101px);
  filter: blur(1px) drop-shadow(0 0 40px rgba(255,255,255,0.5));
}

.hero-flare {
  left: calc(50% - 150px);
  top: calc(50% - 150px);
  animation: flareEnter 2s ease forwards, drift 20s ease-in-out 2s infinite;
}

.grid-channel {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  width: min(960px, 100%);
}

.first-card { grid-column: 1 / 3; }

.review-card {
  position: relative;
  background: linear-gradient(165deg in oklch, var(--card-surface), rgba(250,248,253,0.72));
  color: var(--twilight-plum);
  box-shadow: 4px 14px 50px rgba(58, 45, 92, 0.08), inset 0 0 0 1px rgba(255,255,255,0.54);
  clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
  isolation: isolate;
  min-height: 320px;
  transform: skewX(-3deg);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.review-card:hover {
  transform: skewX(-3deg) translateY(-4px);
  box-shadow: 8px 12px 40px rgba(58, 45, 92, 0.12), -4px -4px 20px rgba(200, 216, 240, 0.3);
}

.card-inner {
  padding: clamp(34px, 6vw, 58px);
  transform: skewX(3deg);
  position: relative;
  z-index: 2;
  opacity: 0;
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  transition-delay: calc(0.8s + (var(--stagger, 0) * 0.2s));
}

.review-card.revealed .card-inner {
  opacity: 1;
  clip-path: polygon(0% 0%, 104% 0%, 96% 100%, 0% 100%);
}

.review-card::before {
  content: "";
  position: absolute;
  inset: 34px 42px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.62) 50%, transparent 100%) -120% 0 / 70% 100% no-repeat,
    linear-gradient(var(--wisteria), var(--wisteria)) 0 8px / 46% 24px no-repeat,
    linear-gradient(var(--wisteria), var(--wisteria)) 0 72px / 88% 18px no-repeat,
    linear-gradient(var(--wisteria), var(--wisteria)) 0 112px / 74% 18px no-repeat,
    linear-gradient(var(--wisteria), var(--wisteria)) 0 198px / 34% 14px no-repeat;
  opacity: 1;
  animation: shimmer 1.35s linear infinite;
  transition: opacity 0.35s ease;
  transition-delay: calc(0.8s + (var(--stagger, 0) * 0.2s));
  z-index: 3;
}

.review-card.revealed::before { opacity: 0; }

.cut-card {
  clip-path: polygon(8% 0, 100% 0, 100% 82%, 92% 100%, 0 100%, 0 18%);
  transform: rotate(var(--rot, 0deg));
}

.cut-card:hover { transform: rotate(var(--rot, 0deg)) translateY(-4px); }
.cut-card .card-inner { transform: none; }

.card-tilt-left { --rot: -2deg; margin-right: 6vw; }
.card-tilt-right { --rot: 1.5deg; margin-left: 7vw; }
.card-tilt-soft { --rot: -1deg; margin-right: 4vw; }

.card-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.review-card h2 {
  font-size: clamp(2.1rem, 5vw, 4.35rem);
  margin-bottom: 28px;
}

.review-card p:not(.review-author) { max-width: 540px; }
.review-author { margin-top: 34px; }

.rating-wrap { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.rating-wrap::before {
  content: "";
  position: absolute;
  width: 58px;
  height: 58px;
  left: -21px;
  top: -21px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.8), rgba(240,200,208,0.32) 28%, rgba(200,224,248,0.2) 58%, transparent 70%);
  z-index: -1;
}

.rating-star {
  width: 14px;
  height: 14px;
  display: inline-block;
  background: var(--midnight-iris);
  clip-path: polygon(50% 0, 61% 36%, 98% 36%, 68% 57%, 80% 100%, 50% 73%, 20% 100%, 32% 57%, 2% 36%, 39% 36%);
}

.collection-section { padding-block: clamp(90px, 14vw, 180px); }
.collection-channel { display: grid; gap: min(16vh, 150px); }

.prism-path {
  width: min(420px, 60vw);
  height: 80px;
  justify-self: center;
  opacity: 0.75;
  background-image: radial-gradient(circle, var(--white) 0 2px, var(--rose-quartz) 2px 3px, transparent 4px);
  background-size: 34px 22px;
  clip-path: polygon(0 44%, 100% 0, 100% 24%, 0 72%);
  filter: drop-shadow(0 0 8px rgba(200,224,248,0.7));
}
.path-two { transform: scaleX(-1); }

.recommendation-section {
  background: linear-gradient(165deg in oklch, rgba(224,232,244,0.7), rgba(240,242,250,0.62));
}

.recommendation-line { width: min(860px, 100%); text-align: center; }
.recommendation-line h2 { font-size: clamp(2.8rem, 7vw, 6rem); }

.constellation { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.constellation span,
.fairy-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--white), var(--tone, #c8e0f8) 55%, transparent 75%);
  box-shadow: 0 0 16px var(--tone, #c8e0f8);
  mix-blend-mode: screen;
  animation: dustRise var(--dur, 21s) linear var(--delay, 0s) infinite;
  will-change: transform;
}

.constellation span:nth-child(1) { --tone:#f0c8d0; --dur:28s; --delay:0s; left:16%; top:74%; }
.constellation span:nth-child(2) { --tone:#c8e0f8; --dur:22s; --delay:4s; left:28%; top:62%; }
.constellation span:nth-child(3) { --tone:#d0f0c8; --dur:30s; --delay:1s; left:39%; top:70%; }
.constellation span:nth-child(4) { --tone:#f0c8d0; --dur:19s; --delay:6s; left:58%; top:66%; }
.constellation span:nth-child(5) { --tone:#c8e0f8; --dur:26s; --delay:3s; left:72%; top:76%; }
.constellation span:nth-child(6) { --tone:#d0f0c8; --dur:24s; --delay:8s; left:83%; top:58%; }
.constellation span:nth-child(7) { --tone:#ffffff; --dur:20s; --delay:2s; left:47%; top:82%; }
.constellation span:nth-child(8) { --tone:#f0c8d0; --dur:27s; --delay:7s; left:8%; top:68%; }

.fairy-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fairy-particles span { left: var(--x); bottom: -5vh; }

.footer-section { min-height: 82svh; }
.parting-panel { width: min(680px, 100%); text-align: center; }
.parting-panel h2 { font-size: clamp(2.8rem, 7vw, 5rem); }

.angle-links {
  margin-top: 46px;
  display: flex;
  justify-content: center;
  gap: 28px;
}

.angle-link {
  width: 64px;
  height: 52px;
  display: grid;
  place-items: center;
  position: relative;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
  border: 1px solid transparent;
  background: linear-gradient(var(--card-surface), var(--card-surface)) padding-box, linear-gradient(165deg, var(--midnight-iris), var(--periwinkle)) border-box;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}

.angle-link:hover { transform: translateY(-4px) skewX(-3deg); filter: drop-shadow(0 12px 22px rgba(58,45,92,0.16)); }
.angle-link span { display: block; position: relative; width: 26px; height: 26px; }

.search-mark span { border: 3px solid var(--midnight-iris); clip-path: polygon(12% 0, 100% 0, 84% 84%, 0 100%); }
.search-mark span::after { content:""; position:absolute; width:16px; height:3px; background:var(--midnight-iris); right:-10px; bottom:0; transform:rotate(45deg); }
.bookmark-mark span { background: var(--midnight-iris); clip-path: polygon(10% 0, 90% 0, 90% 100%, 50% 72%, 10% 100%); }
.share-mark span::before,
.share-mark span::after { content:""; position:absolute; background:var(--midnight-iris); height:3px; width:28px; left:0; transform-origin:right center; }
.share-mark span::before { top:8px; transform:rotate(-28deg); }
.share-mark span::after { bottom:8px; transform:rotate(28deg); }
.share-mark span { background: radial-gradient(circle at 100% 50%, var(--midnight-iris) 0 5px, transparent 6px), radial-gradient(circle at 0 20%, var(--midnight-iris) 0 4px, transparent 5px), radial-gradient(circle at 0 80%, var(--midnight-iris) 0 4px, transparent 5px); }

@keyframes rotateGradient { to { --gradient-angle: 525deg; } }
@keyframes breathePattern { 0%,100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 0.48; transform: translateY(24px); } }
@keyframes floatField { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(5vw,-4vh,0) rotate(7deg); } }
@keyframes flareEnter { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift { 0% { transform: translate(0, 0); } 25% { transform: translate(-80px, -40px); } 50% { transform: translate(-30px, -90px); } 75% { transform: translate(-100px, -50px); } 100% { transform: translate(0, 0); } }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(calc(11vh + 20px)); } to { opacity: 1; transform: translateY(11vh); } }
@keyframes shimmer { to { background-position: 220% 0, 0 8px, 0 72px, 0 112px, 0 198px; } }
@keyframes dustRise { from { transform: translate3d(0, 20vh, 0); opacity: 0; } 15%,80% { opacity: 0.9; } to { transform: translate3d(22px, -105vh, 0); opacity: 0; } }

@media (max-width: 1024px) {
  body::before, body::after { width: 10vw; }
  .card-tilt-left { --rot: -1deg; }
  .card-tilt-right { --rot: 0.75deg; }
  .card-tilt-soft { --rot: -0.5deg; }
}

@media (max-width: 767px) {
  .story-section { padding: clamp(72px, 18vw, 110px) clamp(24px, 6vw, 48px); }
  body::before, body::after, .ambient-fields { display: none; }
  .hero-flare { animation: flareEnter 2s ease forwards; filter: blur(10px); }
  .grid-channel { display: block; }
  .review-card, .review-card:hover, .cut-card, .cut-card:hover { transform: none; margin-inline: 0; }
  .card-inner { transform: none; transition: opacity 0.4s ease; clip-path: none; }
  .review-card.revealed .card-inner { clip-path: none; }
  .collection-channel { gap: 120px; }
  .prism-path { width: 78vw; }
  .card-meta { flex-direction: column; gap: 12px; }
  .angle-links { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-delay: 0s !important; }
  .card-inner { opacity: 1; clip-path: polygon(0% 0%, 104% 0%, 96% 100%, 0% 100%); }
  .review-card::before { opacity: 0; }
}