/* CalmaLink · "Únete a decenas de personas que ya se han graduado" — wall of polaroids dealt by the scroll wheel.
   Replaces the old photo carousel (section.student-stories). Everything is scoped with the gw- prefix.
   Paths below (fonts/, grano.svg) are relative to this file: keep the folder structure or adjust them. */

/* handwriting font, self-hosted (SIL Open Font License, see fonts/OFL.txt) */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/caveat-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/caveat-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- section: a deep navy band, lit like a desk under a lamp ----------
   .gw-scroll is taller than the screen; .gw sticks while you scroll through it and the scroll position deals the photos.
   --gw-top: height of the site's sticky header, so the pinned section sits just under it.
   --gw-travel: how much scrolling it takes to deal all the photos. */
.gw-scroll {
  --gw-top: 0px;
  --gw-travel: 1100px;
  --gw-navy: #16354B; --gw-amber: #f2c35a; --gw-doodle: #e39a2a; --gw-paper: #fffdf8; --gw-muted: #4b5d72;
  --gw-hand-font: Manrope, sans-serif;
  --gw-base: #0b2036;
  --gw-bg: radial-gradient(ellipse 75% 85% at 66% 50%, #1e4b74 0%, #11314f 52%, #0a1e33 100%);
  --gw-title: #fff; --gw-hand: #9fe3c9; --gw-sub: #c6d6e5; --gw-note: #8ea5ba; --gw-shadow: rgba(2, 10, 20, .5);
  position: relative;
  height: calc(100vh + var(--gw-travel));
  background: var(--gw-base);
}
.gw {
  position: sticky; top: var(--gw-top);
  min-height: calc(100vh - var(--gw-top));
  display: grid; align-content: center;
  background: var(--gw-bg);
  padding-block: clamp(20px, 3vh, 40px);
  overflow-x: clip;
}
.gw::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .08; mix-blend-mode: overlay; background-image: url("grano.svg"); }
.gw-container { position: relative; max-width: 1560px; margin: 0 auto; padding-inline: 20px; }
.gw-grid { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: center; }

/* title column */
.gw-side { display: grid; gap: 12px; align-content: center; }
.gw-eyebrow { margin: 0; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gw-hand); }
.gw-side h2 { margin: 0; font-size: clamp(1.8rem, 2.3vw, 2.4rem); line-height: 1.06; font-weight: 800; letter-spacing: -.025em; color: var(--gw-title); text-wrap: balance; }
.gw-hand { display: block; margin-top: .18em; font-family: Manrope, sans-serif; font-weight: 700; font-size: 1.14em; letter-spacing: 0; line-height: 1.02; color: var(--gw-hand); }
.gw-mark { position: relative; white-space: nowrap; }
.gw-under { position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .3em; overflow: visible; }
.gw-under path { fill: none; stroke: var(--gw-doodle); stroke-width: 4; stroke-linecap: round; }
.gw-side.gw-in .gw-under path { stroke-dashoffset: 0 !important; transition: stroke-dashoffset .9s ease .4s; }
.gw-sub { margin: 4px 0 0; color: var(--gw-sub); font-size: 1rem; }
.gw-moto { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--gw-hand); }
.gw-note { margin: 0; font-size: .8rem; color: var(--gw-note); }

/* the table: 4 x 2 polaroids, as big as the screen allows while the whole section still fits its height
   (two rows of photo + caption: wall width ~ 2 x available height - 530px) */
.gw-wall { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 18px; padding-block: 12px 4px;
  width: 100%; max-width: min(100%, calc(200vh - 2 * var(--gw-top) - 530px)); justify-self: center; }
.gw-pol { position: relative; margin-top: var(--y, 0px); }
.gw-pol:hover, .gw-pol:focus-within { z-index: 30 !important; }
/* .gw-pol-in is moved by the script (pile -> flight -> place); without the script it simply sits in place */
.gw-pol-in { transform: rotate(var(--r)); transform-origin: 50% 60%; will-change: transform; }
.gw-card { position: relative; margin: 0; background: var(--gw-paper); padding: 9px 9px 0; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 calc(12px + 26px * var(--lift, 0)) calc(26px + 30px * var(--lift, 0)) var(--gw-shadow);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
/* once a photo has landed it floats a little; hover or keyboard focus straightens it, lifts it and brings it forward */
.gw-pol.gw-settled .gw-card { animation: gw-bob var(--bob, 7s) ease-in-out infinite alternate; }
.gw-pol.gw-settled:hover .gw-card, .gw-pol.gw-settled:focus-within .gw-card { animation: none; transform: rotate(calc(var(--r) * -1)) translateY(-12px) scale(1.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 30px 60px var(--gw-shadow); }
@keyframes gw-bob { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-5px) rotate(.7deg); } }
.gw-card img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; background: #e6eef3; }
.gw-card figcaption, .gw-you-cap { position: relative; margin: 0; padding: 8px 28px 12px 3px; min-height: 3.3em; font-family: Manrope, sans-serif; font-weight: 700;
  font-size: clamp(1.05rem, 1.25vw, 1.35rem); line-height: 1.05; color: var(--gw-navy); }
.gw-tape { position: absolute; z-index: 2; top: -11px; left: 50%; width: 76px; height: 22px; transform: translateX(-50%) rotate(var(--tr, -3deg));
  background: var(--tc, rgba(242, 195, 90, .62)); box-shadow: 0 1px 2px rgba(11, 23, 38, .08); }
/* hand-drawn doodles: the script draws each one as its photo lands */
.gw-doodle { position: absolute; right: -2px; bottom: 8px; width: 31px; height: 31px; overflow: visible; }
.gw-doodle.gw-wide { left: 2px; right: auto; bottom: 3px; width: 72%; height: 10px; }
.gw-doodle path { fill: none; stroke: var(--gw-doodle); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* the empty polaroid: "Tu foto, aquí" */
.gw-you-frame { position: relative; aspect-ratio: 1 / 1; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center;
  border: 2px dashed #9fb4c7; border-radius: 2px; background: repeating-linear-gradient(135deg, #f6f9fb 0 10px, #eef3f7 10px 20px); }
.gw-cap { width: 60px; height: auto; }
.gw-pol-you.gw-arrived .gw-cap, .gw-pol-you.gw-settled:hover .gw-cap { animation: gw-toss 1.3s cubic-bezier(.3, .7, .3, 1) 1; }
@keyframes gw-toss { 0% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-40px) rotate(-200deg); } 75% { transform: translateY(3px) rotate(-360deg); } 100% { transform: translateY(0) rotate(-360deg); } }
.gw-you-frame b { font-family: Manrope, sans-serif; font-size: 1.3rem; line-height: 1; color: var(--gw-muted); font-weight: 700; }
.gw-you-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 7px 11px; border-radius: 999px; background: var(--gw-amber); color: var(--gw-navy);
  font-family: inherit; font-size: .76rem; font-weight: 800; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease; }
.gw-you-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(242, 195, 90, .45); }
.gw-you-cta:focus-visible { outline: 3px solid var(--gw-navy); outline-offset: 3px; }

/* tablet: title on top, the table below */
@media (max-width: 1023px) {
  .gw-grid { grid-template-columns: 1fr; }
  .gw-side { max-width: 640px; }
  .gw-wall { max-width: min(100%, calc(200vh - 2 * var(--gw-top) - 990px)); }
}
/* phone: a deck of photos; scrolling throws the top photo aside and shows the next, down to "Tu foto, aquí" */
@media (max-width: 700px) {
  .gw-scroll { --gw-travel: 1300px; }
  .gw-side h2 { font-size: 1.75rem; }
  .gw-side { gap: 8px; }
  .gw-moto, .gw-note { display: none; }
  .gw-wall { display: block; width: min(84vw, calc((100vh - var(--gw-top) - 280px) * .79)); max-width: none; aspect-ratio: .79; margin: 26px auto 0; padding: 0; }
  .gw-pol { position: absolute; inset: 0; margin: 0; }
  .gw-card figcaption, .gw-you-cap { font-size: 1.3rem; }
}
/* reduced motion, the site's motion switch, or no script: no pinning, every photo simply in its place */
.gw-scroll.gw-static { height: auto; }
.gw-scroll.gw-static .gw { position: relative; min-height: 0; }
@media (max-width: 700px) {
  .gw-scroll.gw-static .gw-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; width: 100%; aspect-ratio: auto; }
  .gw-scroll.gw-static .gw-pol { position: relative; inset: auto; }
  .gw-scroll.gw-static .gw-moto, .gw-scroll.gw-static .gw-note { display: flex; }
  .gw-scroll.gw-static .gw-card figcaption, .gw-scroll.gw-static .gw-you-cap { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gw-pol.gw-settled .gw-card, .gw-pol-you.gw-arrived .gw-cap, .gw-pol-you.gw-settled:hover .gw-cap { animation: none; }
  .gw-card, .gw-you-cta { transition: none; }
}