/* The Land of the Rising Sun Collection (22 Sep 2026).
   A white field, a horizon, water below. The sun sits half-set on the horizon
   until the section is seen, then rises above the three designs; they come up
   to stand on the horizon and their reflections settle into the water.

   Sizes are worked out from three measures — the sun, the picture's width and
   its height — so the sun always clears the pictures and the reflections always
   start exactly at the horizon, whatever the screen. */

.rs { --D: clamp(170px, 17vw, 250px); --PW: clamp(150px, 16vw, 230px); --PH: calc(var(--PW) * 1.25);
  --SD: clamp(54px, 5vw, 72px); --PT: clamp(50px, 8vh, 100px);
  --SKY: calc(var(--PH) + var(--D) + 90px); --REF: calc(var(--PH) * .72);
  --sun: var(--flag, #D62828); --ink-dark: var(--nav-bg, #001E2D);
  /* How far the words stand above the pictures, her word 11 Oct 2026 ("'Ung layo
     ng text sa photo dapat same"): the Yin Yang Collection's own distance on each
     screen, measured off that band — 45px on a phone, 125px above it. (It is not
     a number written anywhere in that band: its pair is centred in a stage sized
     to the window, so the distance is what is left over.) --shift is what the
     stage must move to get it; 70px is already built in — the 90px of sky in
     --SKY, less the 20px the stage rises by. */
  --rs-gap: 125px; --shift: calc(var(--rs-gap) - 70px);
  background: #fff; color: var(--ink-dark); padding: var(--PT) 16px 0; overflow: hidden; position: relative; }
/* no white under the sea: the water runs straight into the next section (her word, 22 Sep 2026) */
/* the heading, written the way the YinYang Collection's is: the collection's
   name small on top, a headline, a line of verse, the count */
/* no margin of its own: the distance down to the pictures is --rs-gap, carried
   on the stage's margin (see --shift above). Two adjoining margins collapse to
   the larger, so a margin here would be swallowed by the stage's (11 Oct 2026). */
.rs-head { position: relative; z-index: 4; display: grid; margin: 0; }
.rs-head-in { grid-area: 1 / 1; display: grid; gap: 8px; justify-items: center; text-align: center; }
/* the empty place the sun comes to rest in, as big as the YinYang mark */
.rs-sun-spot { display: block; width: var(--SD); height: var(--SD); margin-bottom: 6px; }
.rs-head small { font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--sun); }
.rs-head h2 { margin: 0; font: 400 clamp(34px, 5vw, 72px)/1 'Anton', var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink-dark); }
.rs-line { margin: 6px 0 4px; font: italic 400 clamp(17px, 1.6vw, 22px)/1.45 var(--body); color: var(--ink-dark); opacity: .85; }
.rs-head span { font: 600 var(--tiny) var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-dark); opacity: .55; }

/* the shift rides on the stage's own margin, never on the heading's: two
   adjoining margins collapse to the larger, and a heading pulled up by -25px
   simply vanished into the stage's -196px (11 Oct 2026) */
.rs-stage { position: relative; height: calc(var(--SKY) + var(--REF) + 130px); max-width: 1200px; margin: var(--shift) auto 0; }
/* once the big sun has climbed away above the words, the designs and the sea
   come up after it, so no empty sky is left between the heading and the three
   (her word, 22 Sep 2026) */
.rs.is-up .rs-stage { animation: rsStageUp 6.2s both; }
@keyframes rsStageUp { 0%, 58% { margin-top: var(--shift); } 100% { margin-top: calc(var(--shift) - (var(--D) + 20px)); } }

/* the sun (22 Sep 2026). It comes up big, the size it first had, so it reads
   as Japan's own red circle: up from the horizon behind the middle design to
   stand above the three, where it holds a moment — then it climbs on through
   the heading, shrinking as it goes, and comes to rest small, the YinYang
   mark's size, above the collection's name.
   It is placed by its centre, at its resting place; store.js measures how far
   below that the horizon is (--rise) and where it stands above the designs
   (--mid). The water and the designs are drawn in front of it, so it comes up
   from behind them. */
/* Where the sun comes to rest (her word, 11 Oct 2026): its small circle must
   stand exactly where the heading's empty spot is — one band's padding below
   the border, which her margins put at 100px, the same distance as the yin-yang
   mark in its own band. `top` is counted from the border, so the padding has to
   be written into the sum. It must be the SAME number the band is padded by:
   that is why the padding is set through --PT (see edge.css) and never as a
   bare padding-top — when the two drifted apart the sun sat 42px off. */
.rs-sun { position: absolute; z-index: 1; left: 50%; top: calc(var(--PT) + var(--SD) / 2); width: var(--D); height: var(--D);
  border-radius: 50%; background: var(--sun); transform: translate(-50%, -50%) translateY(var(--rise, 0px)); }
.rs.is-up .rs-sun { animation: rsSunRise 6.2s both; }
@keyframes rsSunRise {
  0%       { width: var(--D); height: var(--D); transform: translate(-50%, -50%) translateY(var(--rise, 0px)); animation-timing-function: cubic-bezier(.22,.7,.2,1); }
  42%, 58% { width: var(--D); height: var(--D); transform: translate(-50%, -50%) translateY(var(--mid, 0px)); animation-timing-function: cubic-bezier(.55,0,.25,1); }
  100%     { width: var(--SD); height: var(--SD); transform: translate(-50%, -50%); }
}
/* the heading's white copy shows only inside the sun's circle, and moves and
   shrinks with it, so any letters the sun passes behind turn white */
.rs-head-lit { pointer-events: none; clip-path: circle(calc(var(--D) / 2) at 50% calc(var(--SD) / 2 + var(--rise, 0px))); }
.rs-head-lit, .rs-head-lit small, .rs-head-lit h2, .rs-head-lit .rs-line, .rs-head-lit span { color: #fff !important; opacity: 1 !important; }
.rs.is-up .rs-head-lit { animation: rsSunLit 6.2s both; }
@keyframes rsSunLit {
  0%       { clip-path: circle(calc(var(--D) / 2) at 50% calc(var(--SD) / 2 + var(--rise, 0px))); animation-timing-function: cubic-bezier(.22,.7,.2,1); }
  42%, 58% { clip-path: circle(calc(var(--D) / 2) at 50% calc(var(--SD) / 2 + var(--mid, 0px))); animation-timing-function: cubic-bezier(.55,0,.25,1); }
  100%     { clip-path: circle(calc(var(--SD) / 2) at 50% calc(var(--SD) / 2)); }
}

/* the water: a faint cool wash under the horizon, a line of light on it, ripples */
/* The water, in the woodblock manner she pointed to (22 Sep 2026): teal-blue,
   lighter at the horizon and deep at the bottom, with rolling rows of swell
   capped in foam, and a great curling wave breaking at either side. */
.rs-water { position: absolute; z-index: 2; left: 50%; width: 100vw; transform: translateX(-50%); top: var(--SKY); bottom: 0; overflow: hidden;
  background: linear-gradient(180deg, #3E95B1 0%, #2A80A0 22%, #1A6788 55%, #0C4865 100%);
  border-top: 1px solid rgba(255,255,255,.55); }
.rs-sun-glow { position: absolute; left: 50%; top: 4px; width: calc(var(--D) * .9); height: calc(var(--D) * .6); z-index: 1;
  transform: translateX(-50%) scaleY(.6); transform-origin: top; border-radius: 50%; background: var(--sun);
  filter: blur(16px); opacity: 0; mix-blend-mode: screen; transition: opacity 2.6s ease, transform 2.6s cubic-bezier(.22,.7,.2,1); }
.rs.is-up .rs-sun-glow { animation: rsGlow 6.2s both; }
@keyframes rsGlow { 0% { opacity: 0; transform: translateX(-50%) scaleY(.6); } 42%, 58% { opacity: .5; transform: translateX(-50%) scaleY(1); } 100% { opacity: .12; transform: translateX(-50%) scaleY(.5); } }

/* the rows of swell, stretched to the water's own shape */
.rs-sea-rows { position: absolute; inset: 0; width: 100%; height: 100%; }
.sea-fine path { fill: none; stroke: rgba(255,255,255,.17); stroke-width: 1; }
.sea-foam { fill: none; stroke: #F3EFE0; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.sea-lace { fill: none; stroke: rgba(243,239,224,.5); stroke-width: 1.6; stroke-dasharray: 2 8; stroke-linecap: round; }
.sea-tips path { fill: none; stroke: #F3EFE0; stroke-width: 2.6; stroke-linecap: round; }
.sea-dots circle { fill: #F3EFE0; opacity: .85; }
.sea-row { transform-box: view-box; animation: seaSway 11s ease-in-out infinite alternate; }
.sea-row-b { animation-duration: 8s; animation-direction: alternate-reverse; }
.sea-row-c { animation-duration: 6.5s; }
.sea-fine { animation: seaSway 16s ease-in-out infinite alternate-reverse; }
@keyframes seaSway { from { transform: translate(-26px, 2px); } to { transform: translate(26px, -3px); } }

/* the great waves at either side, breaking up over the horizon; the one on the
   right is the same wave turned round */
.rs-curl { position: absolute; z-index: 2; bottom: 0; height: calc(var(--REF) + 130px + 90px); width: auto; aspect-ratio: 280 / 520; overflow: visible; }
.rs-curl-l { left: calc(50% - 50vw - 26px); }
.rs-curl-r { right: calc(50% - 50vw - 26px); transform: scaleX(-1); }
.curl-crest { fill: none; stroke: #F3EFE0; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.curl-inner { fill: none; stroke: rgba(243,239,224,.55); stroke-width: 3; stroke-linecap: round; }
.curl-claws path { fill: none; stroke: #F3EFE0; stroke-width: 4.5; stroke-linecap: round; }
.curl-streaks path { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 2; }
.curl-face { fill: none; stroke: rgba(243,239,224,.85); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 6; }
.curl-spray circle { fill: #F3EFE0; opacity: .9; transform-box: fill-box; animation: sprayUp 4.6s ease-out infinite; animation-delay: var(--d); }
.curl-body { transform-box: fill-box; transform-origin: 20% 100%; animation: curlLean 6s ease-in-out infinite alternate; }
@keyframes curlLean { from { transform: rotate(-1.4deg) scale(1); } to { transform: rotate(1.2deg) scale(1.025); } }
@keyframes sprayUp { 0% { transform: translate(0, 6px); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(8px, -28px); opacity: 0; } }

/* the three designs, standing on the horizon, 100px apart picture to picture
   (the batch number and its 10px, 20px in all, sit inside each figure) */
.rs-row { position: absolute; left: 0; right: 0; top: calc(var(--SKY) - var(--PH)); z-index: 3;
  display: flex; justify-content: center; align-items: flex-start; column-gap: 81px; }
.rs-one { margin: 0; display: grid; grid-template-columns: auto var(--PW); grid-template-rows: var(--PH) var(--REF) auto; column-gap: 10px; }
.rs-batch { grid-column: 1; grid-row: 1; align-self: start; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font: 600 var(--tiny) var(--mono); letter-spacing: .14em; text-transform: uppercase; line-height: 1; color: var(--ink-dark); opacity: 0;
  transition: opacity .8s ease calc(1.6s + var(--i) * .25s); }
.rs-shot { grid-column: 2; grid-row: 1; position: relative; display: block; overflow: hidden; background: #f1f1f1;
  box-shadow: 0 18px 40px -26px rgba(0,18,25,.55);
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s ease calc(1.1s + var(--i) * .25s), transform 1.1s cubic-bezier(.2,.7,.2,1) calc(1.1s + var(--i) * .25s); }
.rs-shot picture, .rs-shot img, .rs-reflect picture, .rs-reflect img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }

/* each reflection is the picture turned over, fading into the water, and never
   quite still */
.rs-reflect { grid-column: 2; grid-row: 2; position: relative; overflow: hidden; pointer-events: none; opacity: 0;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0) 92%); mask-image: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0) 92%);
  transition: opacity 1.2s ease calc(1.6s + var(--i) * .25s); }
/* turned over in place, so the foot of the picture meets the water line */
.rs-reflect picture { height: var(--PH); transform: scaleY(-1); transform-origin: 50% 50%;
  filter: url(#rs-wave) blur(.4px) saturate(.85) brightness(.9); animation: rsWave 5.5s ease-in-out infinite; }
.rs-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@keyframes rsWave { 0%, 100% { transform: scaleY(-1) skewX(0deg) translateX(0); } 50% { transform: scaleY(-.985) skewX(.6deg) translateX(2px); } }

/* the name and the price sit 10px under the shirt, as they do everywhere else
   on the Shop (her word, 22 Sep 2026) — on the water, over the top of the
   reflection, rather than down past the end of it */
.rs-one figcaption { grid-column: 2; grid-row: 2; align-self: start; position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 10px; text-align: right;
  opacity: 0; transition: opacity .8s ease calc(2s + var(--i) * .25s); }
.rs-one figcaption b { font: 600 var(--tiny) var(--mono); letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; color: #FFF8E6;
  text-shadow: 0 1px 2px rgba(4,30,46,.9), 0 0 10px rgba(4,30,46,.8); }
.rs-price { padding: 7px 12px; border-radius: 4px; background: var(--nav-ink, #FFB627); color: var(--ink-dark);
  font-family: var(--price), var(--mono); font-weight: 700; font-size: clamp(14px, 1.3vw, 19px); line-height: 1; }
.rs-price .from { font: 600 var(--tiny) var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .7; margin-right: 5px; }
.rs-price .compare { display: none; }

.rs.is-up .rs-shot { opacity: 1; transform: none; }
.rs.is-up .rs-reflect, .rs.is-up .rs-batch, .rs.is-up .rs-one figcaption { opacity: 1; }

/* a phone: three across still, closer together, the sun a little smaller */
@media (max-width: 700px) {
  .rs { --D: 34vw; --PW: 25vw; --rs-gap: 45px; }
  .rs-row { column-gap: 12px; }
  .rs-one { column-gap: 5px; }
  .rs-batch { font-size: var(--tiny); letter-spacing: .08em; }
  .rs-one figcaption b { font-size: var(--tiny); letter-spacing: .08em; }
  .rs-price { font-size: 12px; padding: 5px 7px; }
  .rs-curl { height: calc(var(--REF) + 130px + 40px); }
  .rs-curl-l { left: calc(50% - 50vw - 60px); } .rs-curl-r { right: calc(50% - 50vw - 60px); }
}

/* for anyone who has asked for less motion: the sun is simply up */
@media (prefers-reduced-motion: reduce) {
  .rs-sun, .rs-head-lit, .rs-sun-glow, .rs-stage { animation-duration: 1ms !important; }
  .rs-shot, .rs-reflect, .rs-batch, .rs-one figcaption { transition: none !important; }
  .rs-ripples, .rs-reflect picture, .sea-row, .sea-fine, .curl-body, .curl-spray circle { animation: none !important; }
  .rs-reflect picture { filter: blur(.6px) saturate(.85) brightness(.9) !important; }
}