/* style-common.css: loaded AFTER the existing CSS, same file in both repos. */

/* 1. Background: satin white (dark as an option).
   Two layers (very fine grain + vertical sheen), one per theme, cross-faded on opacity when the theme changes.
   They cover the full height of body and scroll with the content: no fixed background. */
body {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--ui-font-body);
    transition: var(--ui-fade-theme);
}
body::before, body::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-repeat: repeat, no-repeat;
    background-size: 256px 256px, 100% 100%;
    background-attachment: scroll;
    transition: opacity .35s ease;
}
body::before {
    background-color: #E8E9EC;
    background-image: url(textures/grain-light.svg), linear-gradient(180deg, #F1F2F4 0%, #E8E9EC 45%, #DEDFE3 100%);
    opacity: 1;
}
body::after {
    background-color: #090A0C;
    background-image: url(textures/grain-dark.svg), linear-gradient(180deg, #131313 0%, #090A0C 60%);
    opacity: 0;
}
body.dark-theme::before { opacity: 0; }
body.dark-theme::after { opacity: 1; }

/* 2. Targeted colour fades (theme and hover), never transition: all */
a, button, h1, h2, p, footer, .footer_content, .signature-logo, #theme-switcher path {
    transition: var(--ui-fade-theme);
}
#theme-switcher svg { transition: opacity .35s ease; }

/* 3. Header: flat, opaque carbon band, straight bottom edge, full-width gold line.
   The line uses the champagne of the name; on a 1 px line a top-to-bottom gradient cannot show, so the same three
   colours run along it (light centre, darker ends). */
.header {
    background: var(--ui-carbon-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
    border-bottom: 1px solid var(--ui-gold);
    border-image: linear-gradient(90deg, var(--ui-champ-lo), var(--ui-champ) 25%, var(--ui-gold-top) 50%, var(--ui-champ) 75%, var(--ui-champ-lo)) 1;
    box-shadow: 0 2px 12px rgba(9, 10, 12, .18);
    transition: transform .3s var(--ui-ease), var(--ui-fade-theme);
}

/* 3b. Sun icon: its fill is an inline style (#161616), hence !important. #E8E9EC on carbon. */
#sun-icon path { fill: var(--ui-carbon-text) !important; }

/* 4. Name: wide capital lettering, champagne gradient */
.name, .name a {
    font-family: var(--ui-font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .3em;
    font-size: max(11px, min(2.4vw, 16px));
}
.name a {
    background: var(--ui-champ-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
}
/* Name hover: a single gold line (header is always carbon, gold allowed), lit from the centre like the links.
   right: .3em removes the spacing after the last letter, so the line stays centred under the text.
   Michroma: baseline at 7 px + 0.25em from the bottom of the link; bottom = 0.25em + 0.8 px puts the line about 4 px under the letters, like the links. */
.name a:not(.project):after {
    bottom: calc(.25em + .8px);
    right: .3em;
    width: auto;
    height: 2.2px;
    background-image: linear-gradient(90deg, transparent, var(--ui-gold) 12%, var(--ui-gold-hi) 50%, var(--ui-gold) 88%, transparent);
    background-position: center;
    background-size: 0% 2.2px;
}
@media (hover: hover) {
    .name a:not(.project):hover:after { background-size: 100% 2.2px; }
}
.name a:not(.project):active:after {
    background-size: 100% 2.2px;
    background-image: linear-gradient(90deg, transparent, var(--ui-gold-hi) 12%, var(--ui-gold-hi) 88%, transparent);
    transition-duration: 80ms;
}

/* 5. Headings */
h1, h2 {
    font-family: var(--ui-font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--ui-track-display);
    color: var(--ui-text);
}

/* 6. Separator: double light bar (2.2 : 2.7 : 1), centred, no glow */
.vertical_delimiter {
    width: min(60%, 520px);
    height: var(--ui-bar-h);
    border-radius: 0;
    background: var(--ui-double-bar);
    box-shadow: none;
    margin: 40px auto;
}

/* 7. Links: a single gold line on hover, the same as the name in the header, lit from the centre with an animated
   background-size. Colours: --ui-link-gold / --ui-link-gold-hi (tokens.css), the name's gold on carbon and on the
   dark page, a darker gold on the light page where the name's near-white centre would vanish. */
a:not(.project) { text-decoration: none; }
/* Position: the baseline is 7 px (padding) + 0.242em (Inter descender) above the bottom of the link.
   bottom = 0.242em + 0.8 px puts the 2.2 px line about 4 px under the baseline, without touching the padding or the line height. */
a:not(.project):after {
    bottom: calc(0.242em + .8px);
    height: 2.2px;
    border-radius: 0;
    background-color: transparent;
    background-image: linear-gradient(90deg, transparent, var(--ui-link-gold) 12%, var(--ui-link-gold-hi) 50%, var(--ui-link-gold) 88%, transparent);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0% 2.2px;
    transform: none;
    /* Gentle curve: drawn from the centre, the expo curve of --ui-ease had most of the line out in the first 150 ms */
    transition: background-size .6s cubic-bezier(.4, 0, .2, 1);
}
/* Real hover only with a mouse: on touch screens a tap would leave it stuck on the tapped element */
@media (hover: hover) {
    a:not(.project):hover:after {
        background-size: 100% 2.2px;
        transform: none;
        transition-duration: .6s;
    }
}
/* Press: the line is fully drawn at once and brighter */
a:not(.project):active:after {
    background-size: 100% 2.2px;
    background-image: linear-gradient(90deg, transparent, var(--ui-link-gold-hi) 12%, var(--ui-link-gold-hi) 88%, transparent);
    transition-duration: 80ms;
}

/* 8. Keyboard focus: metal ring (cut-corner elements change their border colour instead, see 11) */
a:focus-visible, button:focus-visible {
    outline: none;
    box-shadow: var(--ui-ring-focus);
}

/* 9. Footer: carbon, thin line, no rounding */
footer {
    border-radius: 0;
    border-top: 2px solid var(--ui-lightbar);
    background: var(--ui-carbon-bg);
    color: var(--ui-text);
}
.footer_content {
    background: transparent;
    border: 1px solid var(--ui-line);
    border-radius: 0;
}
.footer_links a, .footer_links h2 {
    font-size: .85em;
    text-transform: uppercase;
    letter-spacing: var(--ui-track-caption);
}
/* 9a. Footer in Michroma, like the name and the headings (characters it lacks, such as the Japanese link, fall back) */
footer, footer p, footer a { font-family: var(--ui-font-display); }
/* 9c. Footer credits laid out identically on both sites (the original stylesheets differ in text line height and in the
   width where the large mobile signature replaces the inline one: 600 px on About, 768 px on the portfolio). */
.footer_credits { height: 75px; }
.footer_credits p {
    font-size: 12px;
    line-height: 1.6;
    margin: 0 10px;
    padding: 0;
    letter-spacing: .08em;
}
.footer_credits .signature-logo { display: flex; height: 90%; width: auto; }
/* Vector signature: a new file name, so no cache-busting query is needed. Add a ?v= query if the SVG is later replaced
   under the same name. */
.signature-logo {
    -webkit-mask-image: url("The_Aypisam_FPV-signature-WB.svg");
    mask-image: url("The_Aypisam_FPV-signature-WB.svg");
    mask-mode: luminance; /* only the white strokes, not the black outline */
    will-change: transform;
}
.mobile-logo { display: none; }
@media (max-width: 768px) {
    .mobile-logo { display: flex; width: 80%; height: auto; margin: 15px 0; }
    .footer_credits .signature-logo { display: none; }
    footer { padding-bottom: 0; }
    .footer_credits { height: 50px; }
    /* Michroma is wide: smaller links and credits so the 3-column link grid and the one-line credits fit */
    .footer_links a { font-size: .72em; letter-spacing: .1em; }
    .footer_credits p { font-size: 10px; letter-spacing: .04em; }
}
@media (max-width: 480px) {
    .footer_links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
    .footer_credits p { font-size: 9px; letter-spacing: 0; margin: 0 4px; }
}

/* 9d. Text selection: gold background with carbon text (10.8:1), in both themes and on carbon areas */
::selection { background: var(--ui-gold); color: var(--ui-carbon-bg); }

/* 9b. No rounding anywhere (flat panels, sharp edges). Only images keep 2 px. */
.header, footer, .footer_content, button, input, .project, .photo-section, #toc li,
.portfolio-link, .arrow, .share-btn, .content, p, .note, .disclaimer { border-radius: 0 !important; }

/* 11. Corners cut at 57°, only on project cards, chips and section blocks.
   ::before (border box) paints the border colour in the outer outline; ::after (padding box) paints the fill in the
   inner outline, offset by --ui-border-w (tokens.css, --ui-shape-* and --ui-shape-*-inner). Both are geometric
   shapes, so the stroke has the same width and the same smoothing on the straight edges and on the diagonals, and the
   outer edge only shows the border colour over the page. The element itself is not clipped, so a drop-shadow filter
   on it follows the cut outline. The transparent border on the element keeps room for the stroke, --ui-border-w
   (2 px dark, 2.5 px light).
   The border colour is a top-to-bottom gradient of three registered colours (top, 55%, bottom): plain grey at rest,
   the champagne of the name on hover, and the three fade together (section buttons).
   Project cards and gallery sections light up through a separate gold frame instead (.ui-cut-hi, below): animating
   the colours would restyle and repaint the whole card or section, thumbnails included, on every frame of the fade.
   All other buttons are plain rectangles or frameless. */
@property --ui-cut-top { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --ui-cut-mid { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --ui-cut-bot { syntax: "<color>"; inherits: true; initial-value: transparent; }
.project, .photo-section, #toc li, .portfolio-link {
    --ui-cut-top: var(--ui-line);
    --ui-cut-mid: var(--ui-line);
    --ui-cut-bot: var(--ui-line);
}
.project, .photo-section, #toc li {
    position: relative;
    isolation: isolate;
    border: var(--ui-border-w) solid transparent;
    background: none;
    box-shadow: none;
    transition: --ui-cut-top .3s ease, --ui-cut-mid .3s ease, --ui-cut-bot .3s ease, filter .3s ease, var(--ui-fade-hover);
}
.project, .photo-section {
    --ui-cut-shape: var(--ui-shape-card); --ui-cut-inner: var(--ui-shape-card-inner); --ui-cut-fill: var(--ui-card-fill);
}
#toc li {
    --ui-cut-shape: var(--ui-shape-btn); --ui-cut-inner: var(--ui-shape-btn-inner); --ui-cut-fill: none;
}
.project::before, .photo-section::before, #toc li::before,
.project::after, .photo-section::after, #toc li::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}
.project::before, .photo-section::before, #toc li::before {
    inset: calc(-1 * var(--ui-border-w));
    background: linear-gradient(180deg, var(--ui-cut-top), var(--ui-cut-mid) 55%, var(--ui-cut-bot));
    clip-path: var(--ui-cut-shape);
}
.project::after, .photo-section::after, #toc li::after {
    inset: 0;
    background: var(--ui-cut-fill);
    background-color: var(--ui-carbon-surface);
    clip-path: var(--ui-cut-inner);
}
/* Hover and focus: gold border with the champagne gradient of the name (tokens.css, --ui-frame-*: bright on the dark
   page, shifted darker on the light page), plus, in light theme, a small dark shadow around the shape so the gold line
   has a contrasting edge on the light page.
   The real :hover only applies with a mouse (hover: hover); touch screens get the same look through is-current
   (the element nearest the centre of the screen), so a tap never leaves a hover stuck on an element. */
#toc li:has(a:focus-visible) {
    --ui-cut-top: var(--ui-frame-top);
    --ui-cut-mid: var(--ui-frame-mid);
    --ui-cut-bot: var(--ui-frame-bot);
}
body.light-theme #toc li:has(a:focus-visible) {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, .45));
}
@media (hover: hover) {
    #toc li:hover {
        --ui-cut-top: var(--ui-frame-top);
        --ui-cut-mid: var(--ui-frame-mid);
        --ui-cut-bot: var(--ui-frame-bot);
    }
    body.light-theme #toc li:hover {
        filter: drop-shadow(0 0 4px rgba(0, 0, 0, .45));
    }
}

/* 11b. Gold frame of the project cards and gallery sections: <span class="ui-cut-hi"><span></span></span>, first child
   of the element (added by script.js / gallery-loader.js), so it sits between the grey frame (::before) and the fill
   (::after). It is painted once, in its own layer, and only its opacity changes: the fade runs on the compositor,
   nothing inside the card or section is restyled or repainted.
   - outer span: opacity (hover, focus, is-current, press) and, in light theme, the dark shadow around the cut outline
     (a filter on the clipped span itself would be clipped away);
   - inner span: the champagne gradient (red for projects without a public link), clipped to the outer outline;
   - inner ::after: the flat light gold of the press state, faded in over the gradient. */
.ui-cut-hi {
    position: absolute;
    inset: calc(-1 * var(--ui-border-w));
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease, filter .3s ease;
    will-change: opacity;
}
.ui-cut-hi > span {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--ui-frame-top), var(--ui-frame-mid) 55%, var(--ui-frame-bot));
    clip-path: var(--ui-cut-shape);
}
.ui-cut-hi > span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ui-frame-press);
    opacity: 0;
    transition: opacity .3s ease;
    will-change: opacity;
}
a.project.non-clickable > .ui-cut-hi > span {
    background: linear-gradient(180deg, var(--ui-red-top), var(--ui-red-mid) 55%, var(--ui-red-bot));
}
body.light-theme .ui-cut-hi { filter: drop-shadow(0 0 4px rgba(0, 0, 0, .45)); }
/* Hover (mouse), keyboard focus or is-current (touch: the element nearest the centre of the screen) */
a.project:focus-visible > .ui-cut-hi, a.project.is-current > .ui-cut-hi, .photo-section.is-current > .ui-cut-hi { opacity: 1; }
@media (hover: hover) {
    a.project:hover > .ui-cut-hi, .photo-section:hover > .ui-cut-hi { opacity: 1; }
}
/* The original rules (style.css, components.css) change background, border and scale on hover: neutralised here. */
a.project, a.project:hover, a.project:active, a.project:focus-visible, a.non-clickable, a.non-clickable:hover {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
    transform: none;
}
#toc li:hover { box-shadow: none; }
/* Press (click or tap): quick (80 ms) and distinct from hover. The frame turns to its light colour over its whole
   height, the section buttons go down 1 px. The project cards drop back down (style-about.css).
   Projects without a public link cannot be clicked: they keep their hover look, with no press state.
   A gallery section is not a button: its press look only shows with a mouse, a finger on it is usually a scroll. */
#toc li:active {
    --ui-cut-top: var(--ui-frame-press);
    --ui-cut-mid: var(--ui-frame-press);
    --ui-cut-bot: var(--ui-frame-press);
    transition-duration: 80ms;
}
a.project:not(.non-clickable):active > .ui-cut-hi,
a.project:not(.non-clickable):active > .ui-cut-hi > span::after { opacity: 1; transition-duration: 80ms; }
@media (hover: hover) {
    .photo-section:active > .ui-cut-hi,
    .photo-section:active > .ui-cut-hi > span::after { opacity: 1; transition-duration: 80ms; }
}
#toc li:active { transform: translateY(1px); }

/* 10a. Touch screens */
@media (hover: none) {
    /* Links: a tap lasts far less than the 0.6 s draw, so the line is held by the is-tapped class (script.js) and
       drawn at the same speed as the mouse hover, then fades out. */
    a:not(.project).is-tapped:after, .name a:not(.project).is-tapped:after { background-size: 100% 2.2px; }
    a:not(.project):active:after, .name a:not(.project):active:after { transition-duration: .6s; }
}

/* 10. Reduced motion: no animation, no transition, no lift.
   .animate starts at opacity: 0 and only reaches 1 through the animation: make it visible directly. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .animate { opacity: 1 !important; transform: none !important; }
    a.project { transform: none !important; }
}