/* WHAT WE DO -- the one section that is NOT paper.
 *
 * Every other section is dark type on #f7f6f2 stock. This one is the hole in
 * that stock: a saturated indigo-to-cyan panel that the paper has been torn
 * away from, top and bottom. That is the whole idea of the section, and it is
 * also what makes it stack: the two torn strips are the same #f7f6f2 as the
 * sections above and below, so on all/index.html the joins read as one sheet
 * ripped open rather than as two panels butted together.
 *
 * Type ramp and reveal timing are the site's (IBM Plex Sans, the ScrollStep
 * gesture step); only the palette is inverted.
 */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
  font-family:"Helvetica Neue",Arial,"Hiragino Sans",Meiryo,sans-serif;
  background:#f7f6f2;
  overflow-x:hidden;
}

/* One viewport tall, like every sibling section. The step is triggered by
   gesture and plays itself, and the sequencer holds the page still while it
   does (ScrollStepSequencer). */
.wwd-scene{
  position:relative;
  height:100svh;
  min-height:100svh;
  background:#f7f6f2;
}

.wwd-stage{
  position:relative;
  width:100%;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#f7f6f2;
}

/* ---- The panel ---------------------------------------------------------- */

/* Base: violet at the left running to cyan at the right, with the top-left
   knocked back so the eyebrow and headline sit on the darkest part of it.
   The two soft blooms on top of it are there for the glass: a backdrop-filter
   over a perfectly smooth gradient blurs to the same smooth gradient and the
   cards read as flat tinted shapes. Something with structure has to be behind
   them before the blur has anything to do. */
.wwd-panel{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(42% 48% at 24% 72%,rgba(150,104,255,.52) 0%,rgba(150,104,255,0) 100%),
    radial-gradient(34% 40% at 72% 26%,rgba(78,226,255,.46) 0%,rgba(78,226,255,0) 100%),
    radial-gradient(26% 34% at 52% 88%,rgba(255,120,214,.22) 0%,rgba(255,120,214,0) 100%),
    radial-gradient(105% 80% at 10% 8%,rgba(8,2,52,.42) 0%,rgba(8,2,52,0) 58%),
    linear-gradient(103deg,
      #3418a8 0%,
      #4423cc 16%,
      #3a34d6 33%,
      #1f6ad2 58%,
      #0d97d4 82%,
      #00b4e0 100%);
}

/* ---- Torn strips -------------------------------------------------------- */

/* Each strip is one canvas, painted by js/TornSeamEdge.js and never moved: the
   torn edge is the section's frame, not something that plays. --wwd-seam-h is
   the canvas's height, which is NOT how thick the paper band looks -- the tear
   line sits about a third of the way in (TornSeamEdge's BASE_Y_RATIO) and the
   rest of the canvas is the uncovered side, which needs that room for the
   contact shadow and the long fibres. Shrink this below ~64px and the shadow
   starts getting cut off in a straight line at the strip's edge. */
.wwd-seam{
  --wwd-seam-h:96px;
  position:absolute;
  left:0;
  right:0;
  display:block;
  width:100%;
  height:var(--wwd-seam-h);
  z-index:3;
  pointer-events:none;
}

.wwd-seam--top{top:0}
.wwd-seam--bottom{bottom:0}

/* No JS means no canvas drawing, so the strips would be empty boxes. Drop them
   and let the panel run to the section edge -- a clean edge would be a worse
   lie than none. */
html:not(.js) .wwd-seam{display:none}

/* ---- Content ------------------------------------------------------------ */

.wwd-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(28px,4.5vh,52px);
  /* Clears the tear line rather than the whole strip: the strip is mostly
     transparent canvas, and padding for its full height would push the copy a
     long way further in than the paper actually reaches. */
  padding:clamp(56px,9vh,104px) clamp(24px,4vw,72px);
  text-align:center;
  color:#fff;
}

.wwd-head{max-width:1000px}

.wwd-eyebrow{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:400;
  font-size:clamp(13px,1.25vw,17px);
  letter-spacing:.14em;
  color:rgba(255,255,255,.82);
  margin-bottom:clamp(10px,1.6vh,18px);
}

.wwd-title{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:700;
  font-size:clamp(24px,2.7vw,40px);
  line-height:1.35;
  letter-spacing:.02em;
  color:#fff;
}

.wwd-lead{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:400;
  font-size:clamp(13px,1.3vw,18px);
  line-height:1.7;
  color:rgba(255,255,255,.88);
  margin-top:clamp(8px,1.4vh,16px);
}

/* ---- Hexagon cards ------------------------------------------------------ */

/* The negative margin is what makes neighbouring hexagons kiss at their
   points: each card's clipped corner is 13% of its width, so pulling them
   together by roughly that much closes the gap the clip left behind. */
.wwd-cards{
  list-style:none;
  display:flex;
  align-items:stretch;
  justify-content:center;
  width:100%;
  max-width:1120px;
}

/* The card itself carries no paint at all -- it is the layout box and the
   stacking context, and its two pseudo-elements are the glass.
   --wwd-hex is repeated rather than shared because clip-path percentages
   resolve against each element's own border box, and the rim's box is 3px
   bigger than the glass's on purpose. */
.wwd-card{
  --wwd-hex:polygon(13% 0%,87% 0%,100% 50%,87% 100%,13% 100%,0% 50%);
  --wwd-rim:2px;
  position:relative;
  isolation:isolate;
  flex:1 1 0;
  min-width:0;
  max-width:380px;
  aspect-ratio:6/5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1.5vh,16px);
  padding:clamp(18px,2.4vw,34px) clamp(30px,4vw,58px);
}
/* Just enough overlap to close the V the two clipped corners leave between
   neighbours down to a hairline, without the points crossing. */
.wwd-card + .wwd-card{margin-left:-0.8%}

/* The cast shadow, and the reason it is a wrapper with a clipped child rather
   than a `filter` on the clipped element itself: clip-path is applied AFTER
   filter, so a drop-shadow on the hexagon gets clipped back inside the hexagon
   and nothing shows -- the same reason box-shadow is useless on a clipped
   shape. Blurring the PARENT of the clipped child lets the softened edge spread
   outside it.
   Being a sibling of the glass rather than its ancestor is the other half of
   the arrangement: `filter` on an ancestor of a backdrop-filtered element makes
   that ancestor the backdrop root, and the glass would then have an empty
   backdrop to blur.
   Offset down and shrunk, so most of the blob clears the pane it belongs to.
   What is left underneath is not a defect: the pane is translucent, so a real
   one would show its own contact shadow through itself near the bottom edge,
   and the glass's backdrop-filter softens it further on the way. */
.wwd-card-shadow{
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;
  filter:blur(22px);
  transform:translateY(28px) scale(.94);
}
.wwd-card-shadow::before{
  content:"";
  position:absolute;
  inset:0;
  clip-path:var(--wwd-hex);
  background:rgba(4,1,30,.58);
}

/* Rim. Sits one --wwd-rim OUTSIDE the glass and is clipped to the same hexagon,
   so the ring of it the glass does not cover is the card's bright edge -- a
   real `border` cannot be used because clip-path cuts it away on the four
   sloped sides. */
.wwd-card::before{
  content:"";
  position:absolute;
  inset:calc(-1 * var(--wwd-rim));
  z-index:-2;
  clip-path:var(--wwd-hex);
  background:linear-gradient(150deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.34) 30%,
    rgba(255,255,255,.14) 58%,
    rgba(255,255,255,.62) 100%);
}

/* The glass. The blur is what the two blooms on .wwd-panel exist to feed;
   saturate pushes the colour it picks up so the pane tints toward whatever it
   is lying over, which is what stops three identical panes from looking like
   three decals. */
.wwd-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  clip-path:var(--wwd-hex);
  backdrop-filter:blur(22px) saturate(180%) brightness(108%);
  -webkit-backdrop-filter:blur(22px) saturate(180%) brightness(108%);
  background:
    /* Specular sweep across the upper-left third -- the one cue that says the
       pane has a surface, rather than being a hole cut in a fog layer. */
    linear-gradient(148deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.10) 26%,
      rgba(255,255,255,0) 46%),
    /* Thin light pooling along the bottom edge, where a real pane would catch
       the panel's glow from underneath. */
    linear-gradient(0deg,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,0) 22%),
    var(--wwd-card-tint);
}

/* Left to right the panes walk the same violet-to-cyan road the panel does,
   one stop further along each time. Each tint is a DARK cast, not a light one:
   the panel behind is bright, so tinting up leaves the panes washed into it
   and they stop being objects. Knocking them down is what makes the rim and
   the shadow read, and it is still the backdrop's own colour coming through --
   just held back a stop. */
.wwd-card--1{--wwd-card-tint:linear-gradient(158deg,rgba(46,16,132,.36),rgba(28,8,104,.44))}
.wwd-card--2{--wwd-card-tint:linear-gradient(158deg,rgba(34,26,140,.34),rgba(16,32,116,.42))}
.wwd-card--3{--wwd-card-tint:linear-gradient(158deg,rgba(16,58,138,.32),rgba(8,70,120,.40))}

.wwd-card-ico{
  display:block;
  width:clamp(34px,3.2vw,48px);
  height:clamp(34px,3.2vw,48px);
  color:#fff;
  flex:0 0 auto;
  margin-bottom:clamp(2px,1vh,10px);
}
.wwd-card-ico svg{width:100%;height:100%;display:block}

.wwd-card-title{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:700;
  font-size:clamp(16px,1.55vw,22px);
  line-height:1.4;
  color:#fff;
  /* Allowed out past the card's padding, because it sits at the hexagon's
     waist where the shape is at full width and the padding is only there to
     keep the body copy clear of the sloped sides. The longest of the three
     titles wraps without this. */
  margin-inline:-7%;
}

.wwd-card-body{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:400;
  font-size:clamp(12.5px,1.18vw,16px);
  line-height:1.75;
  color:rgba(255,255,255,.9);
}

/* ---- Reveal / fallback state machine (mirrors execution-flow) ----------- */

/* The section starts empty and the sequence brings it in. Scoped to the
   conditions the sequence actually runs under, so anywhere it does not run --
   no JS, reduced motion, mobile, a sibling latching is-fallback -- the content
   is simply visible. `is-revealed` means the controller has taken over this
   section's visibility: it lands either because GSAP has just pinned these
   with inline styles of its own, or because the controller gave up before it
   could and is handing them back. Unlike the WebGL sections there is no
   `html.is-fallback` counterpart here, and there must not be: this section's
   reveal has no WebGL in it, so a sibling's context failure is not this
   section's failure and must not be allowed to !important its way past a
   sequence that is still running correctly. */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  html.js:not(.is-fallback) .wwd-scene:not(.is-revealed) .wwd-eyebrow,
  html.js:not(.is-fallback) .wwd-scene:not(.is-revealed) .wwd-title,
  html.js:not(.is-fallback) .wwd-scene:not(.is-revealed) .wwd-lead,
  html.js:not(.is-fallback) .wwd-scene:not(.is-revealed) .wwd-card{
    opacity:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .wwd-scene{height:auto;min-height:100svh}
  .wwd-stage{height:auto;min-height:100svh}
}

/* ---- Responsive --------------------------------------------------------- */

@media (min-width:768px) and (max-width:1199px){
  .wwd-seam{--wwd-seam-h:82px}
  .wwd-card{padding:clamp(14px,2vw,24px) clamp(24px,3.4vw,40px)}
}

/* Below this the hexagons cannot hold three columns of Japanese body copy at a
   readable size, so they stack -- and the section stops being one viewport
   tall, because three stacked hexagons are not going to fit in one. The tear
   is kept: it is the section's identity, and it costs nothing here (no WebGL,
   no scroll lock -- WhatWeDoController skips the sequencer below 768px). */
@media (max-width:767px){
  .wwd-scene,
  .wwd-stage{height:auto;min-height:100svh}
  .wwd-seam{--wwd-seam-h:64px}
  .wwd-content{
    gap:28px;
    padding:56px 20px;
  }
  .wwd-cards{flex-direction:column;align-items:center;gap:14px}
  .wwd-card{
    width:min(340px,92vw);
    max-width:none;
    flex:0 0 auto;
    aspect-ratio:auto;
    min-height:200px;
    padding:26px 44px;
  }
  .wwd-card + .wwd-card{margin-left:0}
}