/* ══════════════════════════════════════════════════════════════════════
   The Sound of Melting — style.css
   Aesthetic: PDF portfolio style
   Palette: soft sky blue → blush pink → lavender → warm cream
   Typography: Work Sans (utility) + Cormorant Garamond (display)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────────── */
:root {
  /* Pastel gradient palette (from PDF) */
  --bg-top      : #c8dff0;   /* soft sky blue */
  --bg-mid      : #dce8f5;   /* pale blue */
  --bg-bot      : #f5eef8;   /* lavender blush */

  /* Section accent tints */
  --tint-pink   : rgba(248, 180, 195, 0.18);
  --tint-blue   : rgba(160, 210, 240, 0.18);
  --tint-lav    : rgba(210, 195, 235, 0.18);

  /* Ink — deep navy (from PDF body text) */
  --ink         : #2c3e55;
  --ink-80      : rgba(44, 62, 85, 0.80);
  --ink-55      : rgba(44, 62, 85, 0.55);
  --ink-32      : rgba(44, 62, 85, 0.32);
  --ink-16      : rgba(44, 62, 85, 0.16);

  /* Accent colours from PDF */
  --accent-pink : #e8829a;   /* pink headings */
  --accent-teal : #5fc0c0;   /* teal labels */
  --accent-lav  : #9b8ec4;   /* lavender labels */
  --accent-gold : #d4a96a;   /* warm gold labels */

  /* Typography */
  --f-display   : "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-ui        : "Work Sans", "Poppins", sans-serif;

  /* Easing */
  --ease-out    : cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-io     : cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5 { margin: 0; padding: 0; width: 100%; }

body {
  font-family            : var(--f-ui);
  font-size              : 16px;
  /* Full-page pastel gradient — matches PDF background */
  background             : linear-gradient(
    160deg,
    #bfd8ef  0%,
    #d0e6f5  20%,
    #e2d8f0  50%,
    #f5e8ee  75%,
    #fdf0f5  100%
  );
  min-height             : 100vh;
  color                  : var(--ink);
  -webkit-font-smoothing : antialiased;
  overflow-x             : hidden;
}
h1 { font-size: 30px; }
h2 { font-size: 25px; }
h3 { font-size: 18px; }
img { width: 100%; height: 100%; display: block; }


/* ══════════════════════════════════════════════════════════════════════
   FLOATING DOTS — PDF decorative elements
   Injected via CSS ::before/::after on #main-page
   ══════════════════════════════════════════════════════════════════════ */
.dot {
  position      : fixed;
  border-radius : 50%;
  pointer-events: none;
  z-index       : 0;
  animation     : dot-float 8s ease-in-out infinite alternate;
}
@keyframes dot-float {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(8px, -14px); }
}


/* ══════════════════════════════════════════════════════════════════════
   MAIN PAGE WRAPPER
   ══════════════════════════════════════════════════════════════════════ */
#main-page {
  display    : block;
  min-height : 100vh;
  position   : relative;
  z-index    : 1;
}

/* ── Top meta bar (like PDF "2025–2026 / DESIGN PORTFOLIO") ─────────── */
.site-meta-bar {
  position      : fixed;
  top           : 0;
  left          : 0;
  width         : 100%;
  z-index       : 900;
  padding       : 0.9rem 2.2rem;
  display       : flex;
  justify-content: space-between;
  align-items   : center;
  font-family   : var(--f-ui);
  font-size     : 0.52rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color         : var(--ink-55);
  background    : rgba(210, 230, 248, 0.35);
  backdrop-filter : blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom : 1px solid rgba(255,255,255,0.45);
}
.site-meta-bar .meta-left { line-height: 1.5; }
.site-meta-bar .meta-right { text-align: right; line-height: 1.5; }


/* ══════════════════════════════════════════════════════════════════════
   HEADER BANNER  (studio image + logo overlay)
   ══════════════════════════════════════════════════════════════════════ */
#sf-header {
  position            : relative;
  width               : 100%;
  min-height          : 340px;
  background-image    : url('assets/studio.png');
  background-size     : cover;
  background-position : center top;
  display             : flex;
  align-items         : center;
  justify-content     : center;
  overflow            : hidden;
  padding-top         : 48px; /* clear meta bar */
}

/* Subtle pastel overlay on the banner image */
#sf-header::after {
  content    : '';
  position   : absolute;
  inset      : 0;
  background : linear-gradient(
    180deg,
    rgba(190, 220, 245, 0.22) 0%,
    rgba(240, 220, 240, 0.18) 100%
  );
  pointer-events: none;
}

/* Responsive banner */
@media (max-width: 1200px) {
  #sf-header { background-image: url('assets/studio-tablet-wide.png'); min-height: 240px; }
}
@media (max-width: 900px) {
  #sf-header { background-image: url('assets/studio-tablet-tall.png'); min-height: 180px; }
}
@media (max-width: 560px) {
  #sf-header { background-image: url('assets/studio-mobile.png'); min-height: 140px; }
}

/* ── Logo block ─────────────────────────────────────────────────────── */
#logo {
  position      : relative;
  z-index       : 10;
  text-align    : center;
  padding       : 1.5rem 2.5rem;
  background    : rgba(255, 255, 255, 0.25);
  border        : 1px solid rgba(255,255,255,0.55);
  border-radius : 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#heading {
  display       : block;
  font-family   : var(--f-ui);
  font-size     : clamp(2rem, 5vw, 3.6rem);
  font-weight   : 600;
  color         : var(--ink);
  letter-spacing: 0.06em;
  line-height   : 1;
}

#sub {
  display       : block;
  font-family   : var(--f-ui);
  font-size     : clamp(0.65rem, 1.3vw, 1rem);
  font-weight   : 300;
  color         : var(--ink-55);
  text-transform: uppercase;
  letter-spacing: 0.50em;
  margin-top    : 8px;
}


/* ══════════════════════════════════════════════════════════════════════
   PAGE / CONTENT
   ══════════════════════════════════════════════════════════════════════ */
#page { position: relative; z-index: 10; }

#content {
  width   : min(88%, 1120px);
  margin  : 0 auto 100px;
}

/* ── Section Divider Label (like PDF "FINAL DESIGN", "PART 01") ──── */
.section-label {
  display       : inline-block;
  font-family   : var(--f-ui);
  font-size     : 0.58rem;
  font-weight   : 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color         : var(--accent-pink);
  margin-bottom : 0.6rem;
}

/* ── Stand / heading ─────────────────────────────────────────────── */
#stand {
  font-family : var(--f-display);
  font-size   : clamp(1.4rem, 2.8vw, 2.2rem);
  font-style  : italic;
  font-weight : 400;
  color       : var(--ink-80);
  margin      : 0 0 32px;
  padding-top : 60px;
  text-align  : center;
  line-height : 1.4;
}

/* ── Three-column body text ──────────────────────────────────────── */
#text {
  font-family    : var(--f-ui);
  font-weight    : 300;
  font-size      : 0.92rem;
  line-height    : 1.90em;
  column-count   : 3;
  column-gap     : 4%;
  color          : var(--ink-80);
  margin-bottom  : 16px;
  /* Subtle tinted card behind the text block */
  background     : rgba(255, 255, 255, 0.28);
  border         : 1px solid rgba(255,255,255,0.55);
  border-radius  : 16px;
  padding        : 2rem 2.4rem;
  backdrop-filter: blur(6px);
}


/* ══════════════════════════════════════════════════════════════════════
   PORTFOLIO INTRO
   ══════════════════════════════════════════════════════════════════════ */
.portfolio-intro {
  text-align  : center;
  margin-bottom: 2.2rem;
  position    : relative;
  z-index     : 2;
}
.lp-eyebrow {
  font-family   : var(--f-ui);
  font-size     : 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color         : var(--ink-55);
  margin-bottom : 0.5rem;
}
.lp-tagline {
  font-family : var(--f-display);
  font-style  : italic;
  font-size   : clamp(1.05rem, 1.8vw, 1.35rem);
  color       : var(--ink-55);
}


/* ══════════════════════════════════════════════════════════════════════
   DECORATIVE ORBS (inline, behind cards)
   ══════════════════════════════════════════════════════════════════════ */
.lp-bg-inline {
  position       : relative;
  pointer-events : none;
  height         : 0;
  z-index        : 0;
}
.lp-orb {
  position      : absolute;
  border-radius : 50%;
  opacity       : 0.22;
  animation     : orb-drift 20s ease-in-out infinite alternate;
}
.lp-orb-1 {
  width: 260px; height: 260px; top: -80px; left: -5%;
  background: #96c3e8; animation-duration: 22s;
}
.lp-orb-2 {
  width: 180px; height: 180px; top: -50px; right: 8%;
  background: #e8a0b8; animation-duration: 17s; animation-delay: -4s;
}
.lp-orb-3 {
  width: 120px; height: 120px; top: 20px; left: 45%;
  background: #c0a8dc; animation-duration: 25s; animation-delay: -9s;
}
@keyframes orb-drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(14px,-18px) scale(1.04); }
  100% { transform: translate(-8px,12px) scale(0.97); }
}


/* ══════════════════════════════════════════════════════════════════════
   MODE CARDS  (PDF-style glass cards)
   ══════════════════════════════════════════════════════════════════════ */
.lp-cards {
  position        : relative;
  z-index         : 2;
  display         : flex;
  gap             : clamp(0.9rem, 2.2vw, 1.8rem);
  align-items     : stretch;
  justify-content : center;
  flex-wrap       : wrap;
  padding-bottom  : 0.5rem;
}

.lp-card {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 0.85rem;
  padding        : 2rem 1.8rem 1.8rem;
  width          : clamp(165px, 22vw, 268px);

  /* PDF glass card style */
  border         : 1px solid rgba(255, 255, 255, 0.72);
  border-radius  : 24px;
  background     : linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.60) 0%,
    rgba(220, 235, 252, 0.35) 100%
  );
  backdrop-filter         : blur(20px) saturate(1.3);
  -webkit-backdrop-filter : blur(20px) saturate(1.3);
  box-shadow     : 0 6px 32px rgba(100, 140, 200, 0.12),
                   inset 0 1px 0 rgba(255,255,255,0.85);

  cursor     : pointer;
  font-family: var(--f-ui);
  color      : var(--ink);
  transition : background 0.28s, border-color 0.28s,
               transform 0.24s, box-shadow 0.28s;
}
.lp-card:hover {
  background : linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(200, 225, 248, 0.52) 100%
  );
  transform  : translateY(-8px);
  box-shadow : 0 20px 50px rgba(100, 140, 200, 0.18),
               inset 0 1px 0 rgba(255,255,255,0.95);
}

/* Card accent borders on hover */
.lp-card-1:hover { border-color: rgba(232, 130, 154, 0.55); }
.lp-card-2:hover { border-color: rgba(220, 110,  80, 0.50); }
.lp-card-3:hover { border-color: rgba( 80, 175, 220, 0.55); }

.lp-card-num {
  font-size     : 0.54rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color         : var(--ink-32);
  align-self    : flex-start;
}
.lp-card-ice { width: 96px; height: 126px; flex-shrink: 0; }
.lp-card-ice svg { width: 100%; height: 100%; }
.lp-card-label { text-align: center; }
.lp-card-title {
  font-family  : var(--f-display);
  font-size    : clamp(1.1rem, 1.8vw, 1.38rem);
  font-weight  : 600;
  margin-bottom: 0.28rem;
  color        : var(--ink);
}
.lp-card-desc {
  font-family : var(--f-display);
  font-style  : italic;
  font-size   : clamp(0.75rem, 1.1vw, 0.92rem);
  color       : var(--ink-55);
}
.lp-card-arrow {
  font-size  : 1rem;
  color      : var(--ink-32);
  margin-top : auto;
  transition : transform 0.22s, color 0.22s;
}
.lp-card:hover .lp-card-arrow {
  transform : translateX(5px);
  color     : var(--accent-pink);
}

/* ── Portfolio footer note ──────────────────────────────────────── */
.lp-footer {
  position        : relative;
  z-index         : 2;
  width           : 100%;
  display         : flex;
  justify-content : space-between;
  flex-wrap       : wrap;
  gap             : 8px;
  padding         : 0.9rem 0;
  margin-top      : clamp(1.4rem, 2.5vh, 2.2rem);
  border-top      : 1px solid rgba(44, 62, 85, 0.12);
  font-family     : var(--f-ui);
  font-size       : 0.53rem;
  letter-spacing  : 0.20em;
  text-transform  : uppercase;
  color           : var(--ink-32);
}


/* ══════════════════════════════════════════════════════════════════════
   PORTFOLIO GRID  (5-column, image-2 style)
   ══════════════════════════════════════════════════════════════════════ */
.grid {
  display               : grid;
  grid-template-columns : repeat(5, 1fr);
  grid-auto-rows        : 340px;
  width                 : 100%;
  border-radius         : 16px;
  overflow              : hidden;
  border                : 1px solid rgba(255,255,255,0.60);
  box-shadow            : 0 4px 24px rgba(100, 140, 200, 0.10);
}

.grid > iframe,
.grid > img {
  display       : block;
  width         : 100%;
  height        : 100%;
  border-right  : 1px solid rgba(200, 220, 240, 0.50);
  border-bottom : 1px solid rgba(200, 220, 240, 0.50);
  background    : rgba(235, 245, 255, 0.55);
  object-fit    : contain;
  cursor        : pointer;
  transition    : opacity 0.22s, background 0.22s;
}
.grid > img:hover {
  opacity    : 0.88;
  background : rgba(220, 238, 255, 0.65);
}
.grid > iframe {
  object-fit : unset;
  cursor     : default;
}


/* ══════════════════════════════════════════════════════════════════════
   CANVAS SCREEN  (#header — full screen overlay)
   ══════════════════════════════════════════════════════════════════════ */
#header {
  width           : 100%;
  height          : 100vh;
  display         : none;
  position        : relative;
  overflow        : hidden;
  background      : linear-gradient(
    160deg,
    #bfd8ef 0%,
    #cce4f5 40%,
    #e2d8f0 100%
  );
}
#header canvas {
  display   : block;
  width     : 100% !important;
  height    : 100% !important;
  max-width : none !important;
  min-width : 0;
}

/* ── Canvas UI overlay ──────────────────────────────────────────── */
#canvas-ui {
  position       : absolute;
  inset          : 0;
  z-index        : 80;
  pointer-events : none;
  opacity        : 0;
  transition     : opacity 1.4s ease 0.6s;
}
#canvas-ui.visible { opacity: 0.80; }
#canvas-ui.dim     { opacity: 0.25; transition-delay: 0s; }

.cui-project {
  position      : absolute;
  top           : 1.5rem;
  left          : 1.8rem;
  font-family   : var(--f-ui);
  font-size     : 0.52rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color         : var(--ink-55);
  line-height   : 1.6;
}
.cui-mic {
  position      : absolute;
  top           : 1.5rem;
  right         : 1.8rem;
  display       : flex;
  align-items   : center;
  gap           : 0.55rem;
  font-family   : var(--f-ui);
  font-size     : 0.52rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color         : var(--ink-55);
}
.cui-dot {
  width        : 6px;
  height       : 6px;
  border-radius: 50%;
  background   : var(--accent-teal);
  flex-shrink  : 0;
  animation    : mic-ping 2s ease-in-out infinite;
}
@keyframes mic-ping {
  0%   { box-shadow: 0 0 0 0   rgba(95, 192, 192, 0.5); opacity: 1; }
  70%  { box-shadow: 0 0 0 6px rgba(95, 192, 192, 0);   opacity: 0.8; }
  100% { box-shadow: 0 0 0 0   rgba(95, 192, 192, 0);   opacity: 1; }
}

.cui-hints {
  position                : absolute;
  bottom                  : 2rem;
  left                    : 50%;
  transform               : translateX(-50%);
  display                 : flex;
  align-items             : center;
  gap                     : 0.9rem;
  font-family             : var(--f-ui);
  font-size               : 0.52rem;
  letter-spacing          : 0.18em;
  text-transform          : uppercase;
  color                   : var(--ink-55);
  white-space             : nowrap;
  padding                 : 0.55rem 0.9rem;
  border-radius           : 999px;
  background              : rgba(255, 255, 255, 0.28);
  border                  : 1px solid rgba(255,255,255,0.55);
  backdrop-filter         : blur(12px);
  -webkit-backdrop-filter : blur(12px);
}
.cui-key {
  display       : inline-block;
  padding       : 0.18rem 0.5rem;
  border        : 1px solid rgba(44, 62, 85, 0.18);
  border-radius : 3px;
  font-size     : 0.46rem;
  letter-spacing: 0.08em;
  background    : rgba(255,255,255,0.18);
}
.cui-sep { opacity: 0.35; font-size: 0.65em; }

/* ── Back button ─────────────────────────────────────────────────── */
#back-btn {
  position        : absolute;
  top             : 1.2rem;
  left            : 1.4rem;
  z-index         : 200;
  display         : inline-flex;
  align-items     : center;
  gap             : 0.6rem;
  padding         : 0.6rem 1.4rem;
  background      : rgba(255,255,255,0.38);
  border          : 1.5px solid rgba(44, 62, 85, 0.28);
  border-radius   : 30px;
  color           : var(--ink-80);
  font-family     : var(--f-ui);
  font-size       : 0.7rem;
  font-weight     : 500;
  letter-spacing  : 0.12em;
  text-transform  : uppercase;
  cursor          : pointer;
  backdrop-filter : blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow      : 0 2px 12px rgba(44,62,85,0.10);
  opacity         : 0;
  pointer-events  : none;
  transition      : opacity 0.4s ease, background 0.22s, transform 0.22s, box-shadow 0.22s;
}
#back-btn.visible { opacity: 1; pointer-events: auto; }
#back-btn:hover   { background: rgba(255,255,255,0.65); transform: translateX(-3px); box-shadow: 0 4px 18px rgba(44,62,85,0.15); }
#back-btn svg     { width: 20px; height: 12px; }


/* ══════════════════════════════════════════════════════════════════════
   W3.CSS MODAL override
   ══════════════════════════════════════════════════════════════════════ */
.w3-modal {
  background : rgba(20, 30, 50, 0.72) !important;
  backdrop-filter: blur(6px);
}


/* ══════════════════════════════════════════════════════════════════════
   FOOTER BAR
   ══════════════════════════════════════════════════════════════════════ */
.w3-light-grey {
  background : rgba(210, 225, 242, 0.45) !important;
  border-top : 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #text { column-count: 2; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 660px) {
  #text { column-count: 1; }
  .lp-cards { flex-direction: column; align-items: center; }
  .lp-card  { width: min(84%, 340px); flex-direction: row; padding: 0.9rem 1.1rem; }
  .lp-card-ice { width: 62px; height: 82px; }
  .lp-footer { flex-direction: column; text-align: center; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .site-meta-bar { display: none; }
}