/* YOU.INK · the home as one night: opening photo, night panels, dawn. Rules in the README, «La notte». */

/* The slant of the night: the same on the band and on the panels. --slant-sin is its sine: CSS gradients need it to find the corner. */
:root { --slant: 3deg; --slant-sin: .0523; --band: 40px; }
@media (min-width: 768px) { :root { --slant: 2.2deg; --slant-sin: .0384; --band: 44px; } }
@media (min-width: 1100px) { :root { --slant: 1.6deg; --slant-sin: .0279; --band: 48px; } }

[data-pagina="home"] { overflow-x: clip; }
.sw-photo { overflow: hidden; }
.sw-photo canvas { position: absolute; display: block; pointer-events: none; }

/* The dark sections speak with the tokens of the night. */
[data-tono="notte"] {
  --bg: #0B0810; --ink: #EDE8FF; --muted: #9C96AC; --rule: #2B2440; --stage: #15101F;
  background-color: #0B0810; color: #EDE8FF; color-scheme: dark;
}

/* ---------- The opening photo ---------- */
/* The bar lies over the photo: the page starts dark from the very top. */
.nh { margin-top: calc(-1 * var(--nav-h)); padding-top: var(--nav-h); --hero-p: 0; }
.nh .hero-photo { overflow: hidden; }
.nh .photo { will-change: transform; transform: translate3d(0, calc(var(--hero-p) * 7%), 0) scale(calc(1 + var(--hero-p) * .07)); }
.nh .hero-copy { transform: translate3d(0, calc(var(--hero-p) * -46px), 0); }
.nh-title { white-space: normal; }
.nh-row { display: block; overflow-x: visible; overflow-y: clip; padding-bottom: .04em; margin-bottom: -.04em; }
.nh-row > span { display: block; }

/* A nervous light, as in a room where a tube is about to go. Only a dimming, never a flash. */
.nh-light { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #0B0810; opacity: 0; }
.nh[data-fase="done"] .nh-light { animation: nh-tube 11s linear 1.5s infinite; }
@keyframes nh-tube {
  0%, 41%, 45%, 47.5%, 72%, 74%, 100% { opacity: 0; }
  42% { opacity: .26; } 43% { opacity: .05; } 44% { opacity: .34; }
  46.5% { opacity: .14; }
  73% { opacity: .2; }
}

.nh-flash, .np-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #FFF6F0; opacity: 0; }

/* Waiting for the photos: everything is ready to come in. */
.nh[data-fase="wait"] .photo img, .nh[data-fase="wait"] .photo canvas { opacity: 0; }
.nh[data-fase="wait"] .nh-row > span { transform: translate3d(0, 108%, 0) skewY(5deg); }
.nh[data-fase="wait"] .nh-eye,
.nh[data-fase="wait"] .nh-lead { opacity: 0; transform: translate3d(0, 14px, 0); }
.nh[data-fase="wait"] .nh-cta { clip-path: polygon(0 0, 0 0, -12% 100%, -12% 100%); }
.nh[data-fase="wait"] .dot { transform: skewX(-24deg) scaleX(0); }

/* The flash goes off, the photo is there, the headline comes up from below, the dot cuts in last. */
.nh[data-fase="open"] .nh-flash { animation: flash .2s linear both; }
.nh[data-fase="open"] .photo { animation: nh-photo 1.5s cubic-bezier(.2, .9, .1, 1) both; }
@keyframes flash { 0% { opacity: .92; } 34% { opacity: .55; } 100% { opacity: 0; } }
@keyframes nh-photo { from { scale: 1.07; } to { scale: 1; } }
.nh[data-fase="open"] .nh-row > span { animation: nh-rise .72s cubic-bezier(.2, .9, .1, 1) calc(.1s + var(--i) * .09s) both; }
@keyframes nh-rise { from { transform: translate3d(0, 108%, 0) skewY(5deg); } to { transform: none; } }
.nh[data-fase="open"] .nh-eye { animation: nh-in .5s cubic-bezier(.2, .9, .1, 1) .05s both; }
.nh[data-fase="open"] .nh-lead { animation: nh-in .55s cubic-bezier(.2, .9, .1, 1) .5s both; }
@keyframes nh-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
.nh[data-fase="open"] .nh-cta { animation: nh-cut .6s cubic-bezier(.2, .9, .1, 1) .62s both; }
@keyframes nh-cut { from { clip-path: polygon(0 0, 0 0, -12% 100%, -12% 100%); } to { clip-path: polygon(0 0, 112% 0, 100% 100%, -12% 100%); } }
.nh[data-fase="open"] .dot { transform-origin: 0 100%; animation: nh-dot .34s cubic-bezier(.2, .9, .1, 1) .6s both; }
@keyframes nh-dot { from { transform: skewX(-24deg) scaleX(0); } 70% { transform: skewX(-24deg) scaleX(1.5); } to { transform: skewX(-24deg) scaleX(1); } }

/* The photo is not a rectangle on the page: it dissolves into the night on every side, and the blue of its wall lights the page around it. */
@media (min-width: 480px) {
  .nh { background: radial-gradient(ellipse 62% 44% at 50% 30%, rgba(10, 66, 158, .3), rgba(11, 8, 16, 0) 100%), #0B0810; }
  .nh .hero-photo {
    -webkit-mask-image: radial-gradient(ellipse 50% 58% at 50% 44%, #000 58%, rgba(0, 0, 0, .72) 74%, rgba(0, 0, 0, .26) 89%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 58% at 50% 44%, #000 58%, rgba(0, 0, 0, .72) 74%, rgba(0, 0, 0, .26) 89%, transparent 100%);
  }
}
@media (min-width: 1100px), (min-width: 600px) and (min-aspect-ratio: 11/10) {
  .nh { background: radial-gradient(ellipse 44% 78% at 74% 54%, rgba(10, 66, 158, .34), rgba(10, 44, 118, .15) 58%, rgba(11, 8, 16, 0) 100%), #0B0810; }
  .nh .hero-photo {
    --grow: 1.26;
    height: calc(var(--hero-h) * var(--grow)); min-height: 0; width: calc(var(--hero-h) * var(--grow) * 390 / 470);
    margin: calc(var(--hero-h) * -.13) calc(var(--hero-h) * -.1) calc(var(--hero-h) * -.13) calc(var(--hero-h) * -.16);
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 49%, #000 50%, rgba(0, 0, 0, .78) 66%, rgba(0, 0, 0, .32) 83%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 49%, #000 50%, rgba(0, 0, 0, .78) 66%, rgba(0, 0, 0, .32) 83%, transparent 100%);
  }
  .nh .hero-fade { background: none; }
  .nh .hero-copy { position: relative; z-index: 3; }
}

/* ---------- The band that runs under the photo ---------- */
/* It crosses the end of the photo at a decided angle. The slanted edges are a gradient, not a rotated box: a phone draws a rotated edge in steps. */
.marquee-night {
  --h: calc(var(--band) + 100vw * var(--slant-sin) + 4px);
  position: relative; z-index: 5; height: var(--h); margin-block: calc(var(--h) / -2); padding: 0;
  display: flex; align-items: center; color: #0B0810; pointer-events: none;
  background: linear-gradient(calc(180deg - var(--slant)),
    transparent calc(50% - var(--band) / 2 - .6px), var(--dawn) calc(50% - var(--band) / 2 + .6px),
    var(--dawn) calc(50% + var(--band) / 2 - .6px), transparent calc(50% + var(--band) / 2 + .6px));
}
.marquee-tilt { flex: none; width: 108%; margin-left: -4%; overflow: hidden; transform: rotate(calc(-1 * var(--slant))); }
.marquee-night .marquee-set i { background: #0B0810; }
.nh { padding-bottom: 14px; }

/* ---------- The night panels ---------- */
.np-stack { position: relative; background: #0B0810; }
.np {
  --p: 0; --out: 0;
  position: sticky; top: 0; height: 100vh; min-height: 540px; margin-bottom: 62vh; overflow: hidden;
  background: #0B0810; color: #EDE8FF;
  -webkit-mask-image: linear-gradient(calc(180deg - var(--slant)), transparent calc(100vw * var(--slant-sin) - .6px), #000 calc(100vw * var(--slant-sin) + .6px));
  mask-image: linear-gradient(calc(180deg - var(--slant)), transparent calc(100vw * var(--slant-sin) - .6px), #000 calc(100vw * var(--slant-sin) + .6px));
}
@supports (height: 100svh) { .np { height: 100svh; margin-bottom: 62svh; } }
.np:last-child { margin-bottom: 0; }
.np-photo { position: absolute; inset: 0; }
.np-photo .photo { position: absolute; inset: 0; transform: scale(calc(1.09 - var(--p) * .09)); will-change: transform; }
.np-photo img { width: 100%; height: 100%; object-fit: cover; }
.np-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 8, 16, .5) 0, rgba(11, 8, 16, 0) 20%, rgba(11, 8, 16, 0) 52%, rgba(11, 8, 16, .9) 92%); }
.np-dark { position: absolute; inset: 0; z-index: 4; background: #0B0810; opacity: calc(var(--out) * .72); pointer-events: none; }
.np[data-on] .np-flash { animation: flash .18s linear both; }

.np-text {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) calc(30px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
}
.np-time { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .14em; }
.np-time i { display: block; width: 18px; height: 9px; background: var(--dawn); transform: skewX(-24deg); }
.h-np { --fs: 78; line-height: .88; text-wrap: balance; }
.np-logo { font-size: clamp(76px, 25vw, 150px); }
.np-logo .lockup-payoff { font-size: max(11px, .12em); }
.np-cta { padding-inline: 12px; max-width: 320px; }
.np-cta .btn { width: 100%; }

/* The words come in as the panel arrives. Waiting is only for those who will see it happen. */
.m-on .np:not([data-on]) .np-time,
.m-on .np:not([data-on]) .h-np,
.m-on .np:not([data-on]) .np-logo,
.m-on .np:not([data-on]) .np-cta { clip-path: polygon(0 -10%, 0 -10%, -14% 110%, -14% 110%); translate: -14px 0; }
.np-time, .h-np, .np-logo, .np-cta { clip-path: polygon(0 -10%, 114% -10%, 100% 110%, -14% 110%); transition: clip-path .62s cubic-bezier(.2, .9, .1, 1), translate .62s cubic-bezier(.2, .9, .1, 1); }
.np[data-on] .h-np, .np[data-on] .np-logo { transition-delay: .07s; }
.np[data-on] .np-cta { transition-delay: .2s; }

/* Big screens: the photo is a tall sheet to one side, the words run over its edge. */
@media (min-width: 900px) {
  .np-photo { inset: 0 8vw 0 auto; width: min(58vw, 92vh); }
  .np-l .np-photo { inset: 0 auto 0 8vw; }
  .np-veil { background: linear-gradient(180deg, rgba(11, 8, 16, .35) 0, rgba(11, 8, 16, 0) 18%, rgba(11, 8, 16, 0) 62%, rgba(11, 8, 16, .75) 100%); }
  .np-photo {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 7%, #000 17%, #000 83%, rgba(0, 0, 0, .55) 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 7%, #000 17%, #000 83%, rgba(0, 0, 0, .55) 93%, transparent 100%);
  }
  .np-text { padding: 0 max(var(--gutter), calc((100vw - var(--maxw)) / 2)) 7vh; }
  .np-l .np-text { align-items: flex-end; text-align: right; }
  .h-np { --fs: 196; font-size: calc(min(196px, 14.5vw, 25vh) * var(--fit, 1)); max-width: 72vw; }
  .np-logo { font-size: min(190px, 13vw); }
  .np-cta { width: 320px; }
}

/* ---------- «What they drew», in the dark ---------- */
.worn[data-tono="notte"] { padding-bottom: 46px; }
.worn[data-tono="notte"] .tu-tile { background: #15101F; }
@media (min-width: 1100px) {
  .worn[data-sideways] { --extra: 0px; padding: 0; height: calc(100vh + var(--extra)); display: block; }
  .worn[data-sideways] .worn-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
  .worn[data-sideways] .worn-row { display: flex; overflow: visible; width: max-content; max-width: none; margin: 0; gap: 22px; padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); will-change: transform; }
  .worn[data-sideways] .tu { flex: 0 0 auto; width: min(29vw, 44vh); }
}

/* ---------- The dawn ---------- */
.dawn-band { --s: 0; position: relative; height: 118vh; overflow: hidden; background: #0B0810; }
.dawn-dark { position: absolute; inset: 0 0 24% 0; background: none !important; pointer-events: none; }
.dawn-band > i {
  /* the slanted top is a gradient as well; only the shift between the strokes moves */
  position: absolute; left: -25%; right: -25%; height: calc(21vh + 8.9vw); top: calc(var(--i) * 13.2vh + 8vh - 4.45vw);
  background: linear-gradient(176.6deg, transparent calc(150vw * .0593 - .6px), var(--c) calc(150vw * .0593 + .6px));
  transform: translate3d(calc((var(--i) - 3.5) * (var(--s) - .5) * 9vw), calc((1 - var(--s)) * var(--i) * 3.2vh), 0);
  will-change: transform;
}
.dawn-band > i:nth-of-type(1) { --c: #1A0F2E; }
.dawn-band > i:nth-of-type(2) { --c: #2E1338; }
.dawn-band > i:nth-of-type(3) { --c: #561838; }
.dawn-band > i:nth-of-type(4) { --c: #8F1F2E; }
.dawn-band > i:nth-of-type(5) { --c: #C93F14; }
.dawn-band > i:nth-of-type(6) { --c: #F26A00; }
.dawn-band > i:nth-of-type(7) { --c: #F5B277; }
.dawn-band > i:nth-of-type(8) { --c: #E7E6EC; height: calc(34vh + 8.9vw); }
:root[data-theme="uv"] .dawn-band > i:nth-of-type(8) { --c: #0A0613; }
.dawn-copy { position: absolute; z-index: 2; left: 0; right: 0; top: 36vh; display: flex; flex-direction: column; gap: 12px; color: #EDE8FF; }
.dawn-time { font-size: 13px; letter-spacing: .14em; }
.h-dawn { --fs: 88; line-height: .88; max-width: 15ch; text-wrap: balance; }
@media (min-width: 1100px) { .h-dawn { --fs: 190; font-size: calc(min(190px, 13.5vw, 24vh) * var(--fit, 1)); } }

/* ---------- Everything still ---------- */
@media (prefers-reduced-motion: reduce) {
  .nh .photo, .nh .hero-copy { transform: none; }
  .nh-light { display: none; }
  .np { position: relative; margin-bottom: 0; }
  .np-photo .photo { transform: none; }
  .dawn-band > i { transform: none; }
}