/* ==========================================================================
   1. The Universal Constants: In Pursuit of Timeless Harmony
   ==========================================================================
   Here we honor the golden ratio—a whisper from nature,
   guiding balance and proportion throughout the ages.
   Our color palette embodies subtle contrasts between
   light and dark, echoing the perpetual dance of day and night.
   Spacing breathes life into the page, allowing words
   and images to float in open air. Borders, radii, and
   transitions serve as gentle boundaries in this symphony.
============================================================================ */

:root {
  /* ------------------------------------------------------------
     The Eternal Ratio & Core Typographic Scale
     ------------------------------------------------------------ */
  --golden-ratio: 1.618;
  /* The golden thread woven through art and architecture */
  --font-size-base: 1.125rem;
  /* A humble foundation, from which grandeur may arise */
  --font-size-h1: calc(
    var(--font-size-base) * var(--golden-ratio) * var(--golden-ratio)
  );
  --font-size-h2: calc(var(--font-size-base) * var(--golden-ratio));
  --font-size-h3: calc(var(--font-size-base) * var(--golden-ratio) * 0.75);
  --font-size-h4-6: calc(var(--font-size-base) * var(--golden-ratio) * 0.6);

  /* ------------------------------------------------------------
     Color Palette: A Chiaroscuro of Light & Shadow (HSL/HSLA)
     ------------------------------------------------------------ */
  --color-background: hsl(45, 33%, 96%);
  /* A gentle dawn, welcoming all creative spirits */
  --color-default: hsl(0, 0%, 6%);
  /* Midnight hush: introspective and grounded */
  --color-secondary: hsl(0, 0%, 44%);
  /* Twilight whisper: softly complementing the night */

  --color-background-dark: hsl(0, 2%, 10%);
  /* Embracing the solace of deeper night */
  --color-default-dark: hsl(0, 0%, 94%);
  /* Moonlit text on a silent canvas */
  --color-secondary-dark: hsl(0, 0%, 58%);
  /* A subtle starlight guiding the eyes */

  /* ------------------------------------------------------------
     Spatial Poetry
     ------------------------------------------------------------ */
  --space-s: 1rem;
  /* Light footstep, agile and free */
  --space-m: 1.618rem;
  /* Golden measure to catch the eye yet never overwhelm */
  --space-l: 2.618rem;
  /* A more expansive breath of whitespace for clarity */

  /* ------------------------------------------------------------
     Borders, Transitions & Subtle Movements
     ------------------------------------------------------------ */
  --border-radius: 0.25rem;
  /* Softened edges for a more human feel */
  --border-thin: 0.0625rem;
  /* A delicate line for gentle demarcation */
  --transition-default: 300ms ease-in-out;
  --transform-hover-lift: translate(0, -0.25rem);
  /* A light ascent, as though lifted by curiosity */

  /* ------------------------------------------------------------
     Underlining the Journey: Link Decoration
     ------------------------------------------------------------ */
  --color-text-decoration: hsla(0, 0%, 0%, 0.6);
  --color-text-decoration-hover: hsla(0, 0%, 0%, 0.8);
  --text-decoration-thickness: 0.075rem;
}

/* ==========================================================================
   2. Dark Mode: Yin and Yang in Digital Form
   ==========================================================================
   As darkness envelops, we switch seamlessly to a tranquil
   and comforting palette, preserving the balance of design.
========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-background-dark);
    --color-default: var(--color-default-dark);
    --color-secondary: var(--color-secondary-dark);
  }
}

/* ==========================================================================
   3. Reset & Global Foundations
   ==========================================================================
   Clearing the clutter, creating a blank canvas for
   creative expression and visual harmony.
========================================================================== */

b,
strong,
i,
em,
u,
s,
strike,
del,
ins,
sub,
sup,
tt,
code,
kbd,
samp,
var,
cite,
dfn,
mark,
small,
big {
  all: unset;
  font: inherit;
}

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

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

ul {
  list-style-type: none;
}

body {
  background-color: var(--color-background);
  color: var(--color-default);
  font-family: "PP Pangaia", sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  min-height: 100vh;
}

.container {
  max-width: 45rem;
  margin: 0 auto;
  padding: 0 var(--space-s);
}

/* ------------------------------------------------------------
   Media & Fluid Responsiveness
------------------------------------------------------------ */
img,
picture,
video,
canvas {
  display: block;
  max-inline-size: 100%;
  border-radius: var(--border-radius);
}

/* ==========================================================================
   4. Typography: The Written Melody
   ==========================================================================
   Harmonizing headlines with body copy, pacing each line
   to guide the reader's eyes effortlessly.
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  line-height: 1.25;
  max-width: 30rem;
}

h1 {
  font-size: var(--font-size-h1);
  margin-block: var(--space-l) var(--space-m);
}

h2 {
  font-size: var(--font-size-h2);
  margin-block: var(--space-l) var(--space-m);
}

h2.section-title {
  margin-block: var(--space-l) var(--space-s);
}

h2.section-title-small {
  font-size: var(--font-size-base);
  margin-block: var(--space-m) var(--space-s);
}

h3 {
  font-size: var(--font-size-h3);
  margin-block: var(--space-l) var(--space-m);
}

h4,
h5,
h6 {
  font-size: var(--font-size-h4-6);
  margin-block: var(--space-m) var(--space-s);
}

p,
ul,
ol,
li,
figcaption {
  margin-block: var(--space-s);
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

/* ==========================================================================
   5. Links: Connecting Dimensions
   ==========================================================================
   Subtle transitions guide the curious mind from one realm
   of content to another, with gentle color shifts.
========================================================================== */
a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-default);
}

a:hover {
  color: var(--color-default);
}

/* ==========================================================================
   6. Navigation: Guiding Light
   ==========================================================================
   A structured path through the layout, leading visitors
   with gentle clarity.
========================================================================== */
.global-nav {
  padding-block: var(--space-l) 0;
}

svg.logo:hover {
  color: var(--color-secondary);
  transition: color var(--transition-default);
}

/* ==========================================================================
   7. Media & Figures: Frames of Inspiration
   ==========================================================================
   Encapsulating images and videos within gracious margins
   to allow visual narratives to breathe.
========================================================================== */
figure.project-img {
  max-width: 40rem;
  margin-block: var(--space-l);
}

figure.project-img-small {
  max-width: 30rem;
  margin-block: var(--space-m);
}

/* ==========================================================================
   8. Blockquote: Echoes of Wisdom
   ==========================================================================
   Framing thoughtful quotations for reflection and emphasis.
========================================================================== */
blockquote {
  padding: 0 var(--space-l);
  margin-block: var(--space-m);
  border-left: var(--border-thin) solid hsla(0, 0%, 0%, 0.15);
}

/* ==========================================================================
   9. Footer: A Gentle Farewell
   ==========================================================================
   A calm ending, yet an open invitation to explore more.
========================================================================== */
footer {
  margin-block: var(--space-l);
}

.footer-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  border-top: var(--border-thin) solid hsla(0, 0%, 0%, 0.08);
  padding-block: var(--space-m) 0;
}

svg.footer-logo:hover {
  color: var(--color-secondary);
  transform: var(--transform-hover-lift);
  transition: transform 200ms ease-in-out, color var(--transition-default);
}

/* ------------------------------------------------------------
   Custom Imaginations
   ------------------------------------------------------------ */
.separator {
  text-align: center;
}

.square {
  width: 4rem;
  height: 4rem;
  background-color: var(--color-default);
}

.footer-text {
  font-size: var(--font-size-h4-6);
  color: var(--color-secondary);
}

.homehero_top-svg {
  margin-bottom: -30%;
  position: relative;
  z-index: 1;
  background-color: var(--color-background);
}

main {
  padding-block: 3.5rem;
}

p {
  font-family: "PP Writer";
}

.moments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.moment-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

.moment-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ------------------------------------------------------------
   Subtle Entrance Animations with Cartapus
   ------------------------------------------------------------ */
/* Update the Cartapus section */
[data-cartapus] {
  opacity: 0;
  transform: translateY(4px);
  filter: blur(6px);
}

[data-cartapus="visible"] {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1),
    filter 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.moment-image[data-cartapus] {
  transform: translateY(16px) scale(0.95);
  filter: blur(16px);
  opacity: 0;
}

.moment-image[data-cartapus="visible"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity 0.9s cubic-bezier(0.44, 0, 0.56, 1),
    transform 0.7s cubic-bezier(0.44, 0, 0.56, 1),
    filter 1s cubic-bezier(0.44, 0, 0.56, 1);
}

section[data-cartapus] .arrow {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: draw 3s cubic-bezier(0.22, 0.739, 0.785, 0.186) forwards;
}

@keyframes draw {
  0% {
    stroke-dashoffset: 500;
  }
  50% {
    stroke-dashoffset: 500;
    stroke-width: 1;
  }
  60% {
    stroke-dashoffset: 450;
    stroke-width: 1;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 2;
  }
}

a:has(img) img {
  margin-top: -1rem;
}