/* 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);
  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 */
.rs-head { position: relative; z-index: 4; display: grid; margin: 0 0 clamp(10px, 2vh, 24px); }
.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 10px 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 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-dark); opacity: .55; }

.rs-stage { position: relative; height: calc(var(--SKY) + var(--REF) + 130px); max-width: 1200px; margin: 0 auto; }
/* 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: 0; } 100% { margin-top: calc(-1 * (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. */
.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 9px 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 10px 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 8px 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-row { column-gap: 12px; }
  .rs-one { column-gap: 5px; }
  .rs-batch { font-size: 6px; letter-spacing: .08em; }
  .rs-one figcaption b { font-size: 8px; 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; }
}