@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Fraunces:opsz,wght@9..144,300..600&family=Noto+Sans+JP:wght@400;500;600&family=Noto+Serif+JP:wght@400;600&display=swap');

/* SUCCINUM -- amber.
 *
 * The page is one dark field with a single warm thing in it. Almost everything on the
 * surface is bone-coloured and low-contrast; the amber shows up in three places only --
 * the ember beside the call to action, the label that trails the pointer, and the lower
 * inside edge of the giant wordmark. Nothing else is allowed to glow.
 *
 * Layer order, back to front:
 *   -1  the video, filling the bottom 90vh
 *    0  the soft black wash pinned over the top of it
 *    2  the hero block
 *    3  the footer and the wordmark
 *  99998/99999  the two things that follow the pointer
 */

:root {
    /* ground and ink */
    --sc-void: #0D0906;          /* unlit rock */
    --sc-bone: #E9DCC6;          /* every piece of running text */
    --sc-ash: #7C6A57;           /* the quiet second voice */

    /* the resin itself: charred where it is thick, lit where it is thin */
    --sc-amber: #7F3B18;
    --sc-amber-lit: #C9762A;

    /* channel-only copies, for the many places that need one of these at low alpha */
    --sc-bone-rgb: 233 220 198;
    --sc-amber-rgb: 201 118 42;

    /* Amber has mass. Both curves break inertia slowly and then coast for a long
     * time; neither one overshoots, because nothing here is springy. */
    --sc-ease-heavy: cubic-bezier(0.22, 0.62, 0.10, 1);   /* the two reveals */
    --sc-ease-soft: cubic-bezier(0.19, 0.86, 0.22, 1);    /* hover and fade */

    /* 見出しと商品名だけ明朝。和文は Noto Serif JP が受ける。 */
    --sc-serif: 'Fraunces', 'Noto Serif JP', 'Iowan Old Style', Georgia, serif;
    /* 本文は和文も欧文もゴシック。 */
    --sc-sans: 'Archivo', 'Noto Sans JP', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Nothing in this template wants a default margin, and the box model is easier to
 * reason about when padding is inside the width everywhere. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* The whole design is one screen: no scrolling in either direction. */
body {
    background-color: var(--sc-void);
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

/* The wash over the top third. It is a single blurred blob in an SVG, hung well above
 * the viewport so only its lower falloff is on screen. It sits above the video (which
 * is at -1) and below everything readable. */
#top-gradient {
    position: fixed;
    top: -30vh;
    left: 0;
    width: 100vw;
    height: auto;
    display: block;
    z-index: 0;
    pointer-events: none; /* never eat a click meant for the page */
}

/* The video is bottom-anchored, not full-screen: the top tenth of the page stays empty
 * dark so the hero has somewhere quiet to sit. */
.video-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 90vh;
    overflow: hidden;
    z-index: -1;
}

/* Overscaled on purpose -- 110% of a 90vh box -- so the frame can be cropped to the
 * viewport at any aspect ratio without letterboxing. */
#bg-video {
    width: 100%;
    height: 110%;
    object-fit: cover;
    display: block;
    transform: translateY(0%);
}

/* ---------------------------------------------------------------- hero */

/* A centred column near the top edge. Wide (1100px) so the headline can hold its
 * two lines without the break landing in an odd place. */
.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 6vh;
    width: 95%;
    max-width: 1100px;
    margin: 0 auto;
}

/* The only serif on the page. It carries the whole voice, so it gets a real shadow --
 * it lands on top of moving footage and has to stay readable through the light frames. */
.hero-title {
    font-family: var(--sc-serif);
    font-size: 2.8rem;
    font-weight: 400;
    color: var(--sc-bone);
    line-height: 1.15;
    margin-bottom: 2.2rem;
    letter-spacing: -0.015em;
    text-shadow: 0 4px 30px rgb(0 0 0 / 0.5);
}

/* A dark pill that reads as a hole in the page rather than an object on it. The border
 * is the only thing describing its edge until you touch it. */
.hero-btn {
    font-family: var(--sc-sans);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--sc-bone);
    background-color: var(--sc-void);
    border: 1px solid rgb(var(--sc-bone-rgb) / 0.18);
    padding: 1.3rem 2.5rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    cursor: pointer;
    transition: all 0.34s var(--sc-ease-soft);
    box-shadow: 0 4px 25px rgb(0 0 0 / 0.4);
    outline: none;
}

/* On hover the pill inverts: bone fill, void text. */
.hero-btn:hover {
    background-color: var(--sc-bone);
    color: var(--sc-void);
    border-color: var(--sc-bone);
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgb(0 0 0 / 0.3);
}

.hero-btn:active {
    transform: translateY(0);
}

/* The ember. Small, warm, and the first amber on the page -- it breathes rather than
 * blinks, which is why the cycle is long. */
.blinking-dot {
    width: 10px;
    height: 10px;
    background-color: var(--sc-amber-lit);
    border-radius: 50%;
    position: relative;
    display: inline-block;
    animation: pulse-glow 2.8s infinite ease-in-out;
}

/* The heat coming off it: one ring that swells out of the dot and dies. Sized off the
 * dot by a 5px inset on every side, so it stays concentric. */
.blinking-dot::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background-color: rgb(var(--sc-amber-rgb) / 0.45);
    border-radius: 50%;
    animation: wave-expand 2.8s infinite ease-in-out;
}

/* Dim and small at the ends of the cycle, bright and slightly swollen in the middle. */
@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(0.85);
        box-shadow: 0 0 4px rgb(var(--sc-amber-rgb) / 0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
        box-shadow: 0 0 12px rgb(var(--sc-amber-rgb) / 0.9);
    }
}

/* One-way: the ring only ever grows outward and fades, then restarts from nothing. */
@keyframes wave-expand {
    0% {
        transform: scale(0.6);
        opacity: 0.9;
    }
    100% {
        transform: scale(2.3);
        opacity: 0;
    }
}

/* ---------------------------------------------------------------- footer */

/* Fixed at the vertical middle of the screen and pulled back by half its own height,
 * so it stays centred whatever it ends up containing. 20px clear of both edges. */
.footer-container {
    position: fixed;
    top: 50vh;
    left: 20px;
    right: 20px;
    width: calc(100vw - 40px);
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
}

/* Two headings pushed to opposite ends and sitting on a shared baseline. */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 0 5px;
}

.footer-title {
    font-family: var(--sc-sans);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--sc-bone);
    letter-spacing: -0.015em;
    margin: 0;
}

/* The right-hand heading is a phrase, not a label -- it keeps the case it was written in. */
.footer-title.quote {
    text-transform: none;
}

/* Barely there: enough to separate the two rows, not enough to draw the eye. */
.footer-divider {
    border: none;
    height: 1px;
    background-color: rgb(var(--sc-bone-rgb) / 0.18);
    margin: 1.6rem 0;
    width: 100%;
}

/* Three groups on one line. The flex weights below (1 / 2 / 1) are what actually keeps
 * the links centred on the page rather than centred in the leftover space. */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 5px;
}

.footer-socials {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex: 1;
}

/* The icons are stroked with currentColor, so colour alone drives the hover. */
.social-icon {
    color: rgb(var(--sc-bone-rgb) / 0.5);
    transition: all 0.34s var(--sc-ease-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.social-icon:hover {
    color: var(--sc-bone);
    transform: translateY(-2px);
}

.footer-links {
    display: flex;
    gap: 2.8rem;
    justify-content: center;
    align-items: center;
    flex: 2;
}

.footer-link {
    font-family: var(--sc-sans);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--sc-bone);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: opacity 0.34s ease, transform 0.34s ease;
}

/* Full strength at rest, a touch dimmer under the pointer -- the opposite of the usual,
 * and the reason the row never flickers as the pointer crosses it. */
.footer-link:hover {
    opacity: 0.75;
    transform: translateY(-1px);
}

/* The one line of type that is meant to sit below the reading threshold. */
.footer-copyright {
    font-family: var(--sc-sans);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--sc-ash);
    text-align: right;
    flex: 1;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- wordmark */

/* Holds the wordmark against the bottom edge. The 20px of side padding matches the
 * footer above it; the -20px on the text itself cancels it again on the left, which is
 * how the original lands the mark optically centred rather than box centred. */
.footer-logo-wrap {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    margin: 0;
}

/* Sized in vw so it always spans the window. line-height 0.8 crops the empty space
 * above the caps, which is what lets it sit this close to the bottom edge. */
.footer-logo-text {
    font-family: var(--sc-sans);
    font-size: 21.9vw;
    font-weight: 400;
    color: var(--sc-bone);
    letter-spacing: -0.03em;
    margin-right: -0.03em; /* give back the tracking added after the final letter */
    transform: translateX(-20px);
    line-height: 0.8;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    text-align: center;
    width: 100%;
    pointer-events: none;
    opacity: 0.95;
    text-shadow: none;
    white-space: nowrap;
}

/* One letter, one clip. Bottom-aligned so all the clips share a baseline. */
.footer-logo-text .letter-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 0.8;
}

/* Each letter starts fully outside its own clip on the left, blurred, and slides in.
 * script.js stamps the per-letter delay; the duration here is what it counts on. */
.footer-logo-text .letter-inner {
    display: inline-block;
    opacity: 0;
    transform: translateX(-105%);
    filter: blur(20px);
    animation: letter-reveal-mask 1.2s var(--sc-ease-heavy) forwards;
}

/* The signature move. The face of the letter is bone almost all the way down and only
 * catches the amber in the last few percent, so the light reads as pooling along the
 * lower inside edge of the letter rather than as a gradient laid over the type.
 *
 * The stops are placed against the box, not the glyph, so they are worth stating: the
 * clip is one line at line-height 0.8, which puts the top of the lowercase around 29%
 * and the baseline at 93%. 83% is therefore just inside the bottom of the letters, and
 * everything past 93% is descender space -- kept flat so a g or a y would not smear.
 * Because every stop is a share of an em-sized box, the band holds at any viewport.
 *
 * Painting this needs background-clip, so the whole trick lives behind @supports: where
 * that is missing the letters simply stay bone instead of vanishing. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .footer-logo-text .letter-inner {
        background-image: linear-gradient(180deg,
            var(--sc-bone) 0%,
            var(--sc-bone) 83%,
            var(--sc-amber-lit) 89.5%,
            var(--sc-amber) 93%,
            var(--sc-amber) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

@keyframes letter-reveal-mask {
    0% {
        opacity: 0;
        transform: translateX(-105%);
        filter: blur(20px);
    }
    25% {
        opacity: 1; /* up to full early, so the slide is what you watch, not the fade */
    }
    100% {
        opacity: 0.95;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* ---------------------------------------------------------------- hero reveal */

/* Same clip trick as the wordmark, turned on its side: words rise instead of sliding.
 * The padding/margin pair opens the bottom of the clip by 0.15em so descenders are not
 * shaved off, without moving the line. */
.hero-title .word-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.15em;
    margin-bottom: -0.15em;
}

.hero-title .word-inner {
    display: inline-block;
    opacity: 0;
    transform: translateY(105%);
    filter: blur(20px);
    animation: word-reveal-mask 1.3s var(--sc-ease-heavy) forwards;
}

@keyframes word-reveal-mask {
    0% {
        opacity: 0;
        transform: translateY(105%);
        filter: blur(20px);
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ---------------------------------------------------------------- pointer */

/* The pill that trails behind the pointer. Warm glass: the tint is bone rather than
 * white, so it never turns the footage under it blue. Everything positional is left to
 * script.js -- it owns `transform` outright, which is why no transform is animated here. */
.glass-cursor-card {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    pointer-events: none;
    padding: 0.75rem 1.5rem;
    background: rgb(var(--sc-bone-rgb) / 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgb(var(--sc-bone-rgb) / 0.16);
    border-radius: 9999px;
    box-shadow: inset 0 1px 0 0 rgb(var(--sc-bone-rgb) / 0.12); /* top lip only, no drop shadow */
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 0.45s var(--sc-ease-soft),
                background 0.4s var(--sc-ease-soft),
                border-color 0.4s var(--sc-ease-soft),
                box-shadow 0.4s var(--sc-ease-soft);
}

.glass-cursor-card.active {
    opacity: 1;
}

/* Available for a darker surface -- the glass closes up and sits on the page instead of
 * floating over it. */
.glass-cursor-card.dark-mode {
    background: rgb(6 4 2 / 0.82);
    border-color: rgb(var(--sc-bone-rgb) / 0.07);
    box-shadow: inset 0 1px 0 0 rgb(var(--sc-bone-rgb) / 0.05);
}

/* Small, tracked out, and the second of the three amber moments. */
.cursor-card-text {
    font-family: var(--sc-sans);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--sc-amber-lit);
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 0 8px rgb(var(--sc-amber-rgb) / 0.45);
}

/* The lead word stays bone so the pair reads as one phrase with one word lit. */
.cursor-card-text .text-white {
    color: var(--sc-bone);
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
}

/* The ring is pinned to the pointer itself. It is drawn, never filled -- a hairline of
 * bone that you notice mostly by what it crosses. */
.cursor-ring-outline {
    position: fixed;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    border: 1.5px solid rgb(var(--sc-bone-rgb) / 0.45);
    border-radius: 50%;
    z-index: 99998;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 0.45s var(--sc-ease-soft),
                border-color 0.45s ease;
}

.cursor-ring-outline.active {
    opacity: 1;
}

/* Over the call to action the ring opens up (script.js does the scaling) and warms as it
 * thins out, so the pill can leave without the pointer losing its mark. */
.cursor-ring-outline.expanded {
    border-color: rgb(var(--sc-amber-rgb) / 0.3);
}

/* ---------------------------------------------------------------------------
   和文の折り返し。`auto-phrase` は文節の切れ目で折る（対応していないブラウザでは
   既定の挙動に落ちるだけなので、置いて損が無い）。これが無いと
   「ウェブサイ／ト」のようにカタカナ語の途中で折れる。
   `line-break: strict` は句読点や小書き仮名を行頭に出さない（禁則）。
   --------------------------------------------------------------------------- */
body {
  word-break: auto-phrase;
  line-break: strict;
}